/* ===================================================================
   이광섭 파일 — 서류철

   ── 글꼴에 대하여 ─────────────────────────────────────────────
   무료 배너용 굵은 글꼴(Black Han Sans 류)은 쓰지 않는다. 한국 사람
   눈에는 「무료 폰트」로 즉시 읽혀 값싸 보인다.

   두 벌뿐이다. 경계는 「바깥이냐 안이냐」다.
     바깥(남색 화면) = Pretendard   표지 슬로건, 서류철 띠 제목, 라벨
     안 (종이 문서)  = Noto Serif KR 문서 제목, 본문, 숫자
   인쇄물의 정석 — 표지는 산세리프, 내지는 명조. 파일을 펼치는 순간
   글꼴이 바뀌면서 「종이 문서로 들어왔다」는 느낌이 생긴다.

   ── 색에 대하여 ───────────────────────────────────────────────
   파일 색은 채도를 낮춘다. 원색에 가까우면 서류철이 아니라 초등학교
   파일철로 보인다. 짙은 남색 바탕과 미색 종이 사이에서 겨우 구별될 만큼만
   물들인다.
=================================================================== */

:root{
  /* 바탕 — 검정이 아니라 남색이다. 선거 인쇄물의 남색을 눌러 쓴다.
     한때 #0C1526 이었으나 너무 어두워 한 단계 올렸다.
     ※ 이 값을 더 올리면 흐린 글씨(.who .kicker .top-links a)의 대비가
       4.5 아래로 떨어진다. 바탕을 밝히려면 그 셋의 불투명도도 함께 올릴 것. */
  --ink:#14213D;
  --ink-2:#1B2B4B;
  --ink-3:#25375C;

  /* 종이 */
  --paper:#F5F2EA;
  --paper-2:#EBE6DA;
  --rule:#D6CEBE;
  --rule-2:#E3DCCC;
  --text:#1B1A17;
  --text-2:#413C34;
  --muted:#5C5446;      /* 종이 위 11~13px 라벨용. 더 밝으면 읽히지 않는다 */
  --faint:#8A8172;

  /* 파일 색 — 넷뿐이다. 채도를 올리지 말 것 */
  --c-pledge:#2F3C57;      /* 슬레이트 네이비 */
  --c-record:#7A6440;      /* 브론즈 */
  --c-share:#7E4B3E;       /* 테라코타 */
  --c-cheer:#3E5A4C;       /* 세이지 */

  --c:var(--c-pledge);

  /* 금색은 강조 한 군데씩만 쓴다. 넓게 칠하면 즉시 값싸 보인다. */
  --gold:#C9A96A;

  /* --display 는 「바깥」 글꼴이다. 가변 글꼴이라 굵기를 소수점까지
     자유롭게 줄 수 있고, 그래서 등장할 때 굵기를 키우는 것이 가능하다. */
  --display:"Pretendard Variable",Pretendard,-apple-system,"Segoe UI",sans-serif;
  --serif:"Noto Serif KR",serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
         system-ui,"Malgun Gothic",sans-serif;

  --top-h:64px;
  --wrap:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--ink);scroll-padding-top:calc(var(--top-h) + 12px)}
body{
  font-family:var(--serif);
  background:var(--ink);
  color:var(--paper);
  line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;text-align:left}
input,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--c);color:#fff}
:focus-visible{outline:2px solid var(--c);outline-offset:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}
/* 화면낭독기에만 읽히고 눈에는 안 보이게. 지금 쓰는 곳은 없지만
   설명이 필요한 단추를 붙일 때 쓰려고 남겨 둔다. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--paper);color:var(--ink);padding:12px 20px;font-family:var(--sans);font-weight:600}
.skip:focus{left:0}

/* 라벨 두 종류.
   .label   라틴 전용(FILES, 04). 자간을 벌려도 좋다.
   .kicker  한글용. 자간을 벌리지 않는다 — 한글은 이미 글자마다
            네모 칸 안에 여백이 있어서, 더 벌리면 2000년대 관공서 사이트가 된다. */
.label{
  font-family:var(--sans);font-weight:600;
  font-size:11.5px;letter-spacing:.2em;
  color:var(--faint);
}
.kicker{
  font-family:var(--sans);font-weight:500;
  font-size:13.5px;letter-spacing:.005em;
  color:rgba(245,242,234,.58);
}

/* ── 머리 띠 ────────────────────────────────────────────── */
.top{
  position:fixed;top:0;left:0;right:0;height:var(--top-h);z-index:120;
  display:flex;align-items:center;
  background:rgba(20,33,61,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(245,242,234,.09);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top-brand{display:flex;align-items:center;gap:11px}
/* 이름 자리는 두 줄이다. 「총동문회장 후보 기호 1번 이광섭」을 한 줄로 세우면
   작은 화면에서 차림표(공약·경력·참여·응원)와 자리를 다투다 줄이 접힌다.
   직함은 작게 위에, 투표용지에 적히는 「기호 1번 이광섭」은 크게 아래에 둔다. */
.top-brand .tt{display:flex;flex-direction:column;gap:3px;line-height:1}
.top-brand .rl{
  font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.05em;
  color:rgba(245,242,234,.62);
}
/* 사이트 이름은 어느 쪽을 보든 늘 붙어 다니는 유일한 표식이다.
   15.5px 로 두면 차림표와 같은 무게가 되어 「이름」으로 안 읽힌다.
   번호 딱지를 금색으로 채우고 이름을 키워 한 덩이로 세운다. */
.top-brand .no{
  display:grid;place-items:center;width:26px;height:26px;
  background:var(--gold);border:0;border-radius:2px;
  font-family:var(--sans);font-weight:700;font-size:13.5px;line-height:1;
  color:var(--ink);
}
/* 이름은 순백에 금빛 후광. 글자 자체는 건드리지 않는다.

   금색으로 칠해 보았다가 되돌렸다. 대비가 절반(7.12)으로 떨어져 19px 에서
   눈에 띄게 흐려졌다. 금속 그러데이션은 더 나빴다 — 무쇠 구간이 3.28 까지
   내려갔다. 금색은 글자가 아니라 「둘레」에만 쓴다.

     글자   순백 #FFF     대비 15.97   (미색이던 때 14.28 보다 높다)
     둘레   금빛 후광      글자 대비에 영향이 없다

   배경 오려내기(background-clip:text)를 쓰지 않으므로 이름이 사라질 위험도
   없다. text-shadow 는 어느 브라우저에서나 그대로 동작한다. */
.top-brand .nm{
  font-family:var(--serif);font-weight:900;font-size:19px;line-height:1.05;letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 0 16px rgba(201,169,106,.55),0 0 3px rgba(201,169,106,.35);
}
.top-links{display:flex;gap:4px}
.top-links a{
  padding:7px 13px;font-family:var(--sans);font-weight:500;font-size:13.5px;
  color:rgba(245,242,234,.62);transition:color .25s var(--ease);
}
.top-links a:hover,.top-links a.on{color:var(--paper)}
@media(max-width:700px){
  .top-links a{padding:7px 8px;font-size:12.5px}
  .top-brand .nm{font-size:16px}
  .top-brand .rl{font-size:9.5px}
  .top-brand .no{width:23px;height:23px;font-size:12.5px}
}
/* 360px 짜리 화면에서 이름과 차림표가 한 줄에 겨우 들어간다.
   여기서 더 줄이지 않으면 차림표가 아래로 접혀 머리 띠가 두 줄이 된다. */
@media(max-width:430px){
  .top .wrap{padding:0 16px;gap:8px}
  .top-links a{padding:7px 5px;font-size:11.5px}
  .top-brand{gap:8px}
  .top-brand .nm{font-size:14.5px}
  .top-brand .rl{font-size:9px;letter-spacing:.02em}
  .top-brand .no{width:20px;height:20px;font-size:11.5px}
}

/* ═══════════════════════════════════════════════════════════
   표지
═══════════════════════════════════════════════════════════ */
/* 표지 — 사진을 오른쪽 끝까지 흘려보낸다. 작은 네모 사진을
   가운데 띄우면 「붙여 넣은 이미지」로 보인다. 화면 밖으로 넘어가야
   장면이 된다. 왼쪽 가장자리는 남색으로 녹여 글과 겹치게 한다. */
.cover{
  position:relative;overflow:hidden;
  min-height:min(92svh,880px);display:flex;align-items:center;
  padding:calc(var(--top-h) + clamp(48px,7vw,86px)) 0 clamp(56px,8vw,96px);
}
.cover-photo{
  position:absolute;top:0;right:0;bottom:0;
  width:min(54%,720px);
  background:url(../img/hero-portrait.jpg) 52% 20%/cover no-repeat;
}
.cover-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--ink) 0,rgba(20,33,61,.86) 18%,rgba(20,33,61,.30) 48%,transparent 82%),
    linear-gradient(0deg,var(--ink) 0,transparent 30%),
    linear-gradient(180deg,var(--ink) 0,transparent 16%);
}
html.js .cover-photo{animation:photoIn 1.6s var(--ease-out) .1s both}
@keyframes photoIn{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}

.cover-inner{position:relative;z-index:1;width:100%}
.cover .kicker{display:block;margin-bottom:clamp(20px,2.6vw,30px)}
/* 크게. 큰 것은 정말 커야 대비가 생긴다. */
.cover h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(36px,6.4vw,80px);line-height:1.18;letter-spacing:-.04em;
  color:var(--paper);
}
.cover h1 .ln{display:block;overflow:hidden}
html.js .cover h1 .ln > span{display:block;animation:lineUp 1.1s var(--ease-out) both}
html.js .cover h1 .ln:nth-child(1) > span{animation-delay:.12s}
html.js .cover h1 .ln:nth-child(2) > span{animation-delay:.24s}
html.js .cover h1 .ln:nth-child(3) > span{animation-delay:.36s}
@keyframes lineUp{from{transform:translateY(106%)}to{transform:none}}

/* 낱말 하나만 금색으로 집고, 글자가 자리에 앉은 뒤 밑줄이 왼쪽에서 그어진다.
   밑줄을 ::after 로 글자 「아래」에 두면 .ln{overflow:hidden} 이 잘라 버린다
   — 줄이 올라오는 마스크에 필요한 속성이라 뺄 수 없다.
   그래서 배경으로 글자 상자 「안쪽」(92% 지점)에 그린다. */
/* <i> 를 쓴 것은 .ln > span 선택자에 걸리지 않게 하기 위해서다. 기울이지 않는다. */
.cover h1 .hi{font-style:normal;color:var(--gold)}
html.js .cover h1 .hi{
  background:linear-gradient(var(--gold),var(--gold)) 0 92%/0 2px no-repeat;
  animation:drawLine .9s var(--ease-out) 1.05s both;
}
@keyframes drawLine{from{background-size:0 2px}to{background-size:100% 2px}}

/* 세 낱말만 둔다. 한때 옆에 설명을 붙여 봤으나 표지가 번잡해졌다.
   무엇을 하겠다는 말은 공약 파일이 한다. 표지는 각인만 시킨다. */
.promise{list-style:none;margin-top:clamp(32px,4.4vw,48px);display:grid;gap:12px}
.promise li{
  display:flex;align-items:baseline;gap:14px;
  font-size:clamp(16px,1.95vw,21px);line-height:1.55;
  color:rgba(245,242,234,.84);letter-spacing:-.015em;
}
.promise li::before{
  content:"";flex-shrink:0;width:16px;height:1px;background:var(--gold);
  transform:translateY(-.35em);
}
html.js .promise li{animation:fadeUp .9s var(--ease-out) both}
html.js .promise li:nth-child(1){animation-delay:.62s}
html.js .promise li:nth-child(2){animation-delay:.72s}
html.js .promise li:nth-child(3){animation-delay:.82s}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.cover .who{
  margin-top:clamp(28px,3.8vw,44px);
  font-family:var(--sans);font-size:13px;line-height:1.9;
  color:rgba(245,242,234,.52);letter-spacing:.005em;
}
/* 이름은 이 화면에서 슬로건 다음으로 중요한 글자다.
   13px 흐린 한 줄에 섞어 두면 아무도 못 읽는다. 줄을 따로 주고 키운다. */
.cover .who .nm{
  display:block;margin-bottom:5px;
  font-weight:700;font-size:clamp(21px,2.5vw,27px);line-height:1.3;
  letter-spacing:-.025em;color:rgba(245,242,234,.94);
}
html.js .cover .who{animation:fadeUp .9s var(--ease-out) .95s both}

@media(max-width:860px){
  /* 표지를 전체적으로 여미어 첫 화면 안에 더 담는다. */
  .cover{min-height:0;padding-top:calc(var(--top-h) + 34px);padding-bottom:34px;display:block}
  /* 좁은 화면에서는 사진을 위로 올려 배경처럼 깐다.
     높이는 후보 이름이 첫 화면 안에 남을 만큼까지만 준다. */
  .cover-photo{
    position:relative;width:100%;height:min(44svh,330px);
    background-position:52% 14%;margin-bottom:clamp(22px,4vw,32px);
  }
  .cover-photo::after{
    background:
      linear-gradient(0deg,var(--ink) 0,rgba(20,33,61,.18) 46%,transparent 78%),
      linear-gradient(180deg,var(--ink) 0,transparent 22%);
  }
}


/* ═══════════════════════════════════════════════════════════
   서랍 — 서류철 넷
═══════════════════════════════════════════════════════════ */
/* ── 투표일 ───────────────────────────────────────────────
   표지와 서랍 사이에 둔다. 표지는 이름과 약속의 자리라 숫자를 끼우면
   어수선해지고, 머리 띠는 휴대폰에서 이미 11.5px 까지 줄여 놓아 자리가 없다.
   여기는 표지를 지나 서류철로 내려오는 길목이라 반드시 지난다.
   서류철 위에 놓이는 것도 뜻이 있다 — 「시간이 없다, 그러니 읽어라」의 순서다.

   날짜 글씨는 HTML 에 그대로 있고 숫자만 스크립트가 채운다. 스크립트가
   막혀도 「9월 8일 화요일」은 남는다. 선거일은 이 사이트 어디에도 없던
   정보라 숫자를 못 세더라도 날짜만은 보여야 한다. */
.dday{
  display:flex;align-items:center;gap:clamp(15px,2.6vw,30px);
  padding:clamp(17px,2.3vw,25px) 0;
  border-top:1px solid rgba(245,242,234,.13);
  border-bottom:1px solid rgba(245,242,234,.13);
  margin-bottom:clamp(30px,4vw,46px);
}
.dday .d-n{
  display:none;                     /* 스크립트가 숫자를 채우면 켠다 */
  font-family:var(--serif);font-weight:900;line-height:1;
  letter-spacing:-.045em;white-space:nowrap;
  font-size:clamp(29px,5.2vw,50px);
  color:var(--gold);                /* 남색 위 대비 7.12 */
}
.dday.on .d-n{display:block}
/* 브라우저 기본 [hidden]{display:none} 은 위 .dday{display:flex} 를 이기지 못한다.
   선거일이 지나 스크립트가 감출 때 실제로 사라지도록 여기서 못박는다. */
.dday[hidden]{display:none}
.dday .d-n .k{font-size:.5em;letter-spacing:-.01em;margin-right:.02em}
/* 숫자와 글자 사이의 칸막이. 금색을 넓게 칠하지 않으려고 선 하나로 나눈다 */
.dday.on .d-t{
  padding-left:clamp(15px,2.6vw,30px);
  border-left:1px solid rgba(245,242,234,.16);
}
.dday .d-t b{
  display:block;font-family:var(--sans);font-weight:700;
  font-size:clamp(14px,1.6vw,17px);letter-spacing:-.01em;color:var(--paper);
}
.dday .d-t span{
  display:block;margin-top:5px;font-family:var(--sans);
  font-size:clamp(11.5px,1.2vw,13px);line-height:1.6;
  color:rgba(245,242,234,.62);      /* 대비 6.31 */
  word-break:keep-all;
}
@media(max-width:430px){
  /* 좁아지면 선을 지우고 위아래로 쌓는다. 「D-18」과 날짜가 한 줄에서
     서로를 밀어내면 숫자가 쪼그라들어 눈에 띄는 이유가 사라진다. */
  .dday{flex-direction:column;align-items:flex-start;gap:9px}
  .dday.on .d-t{padding-left:0;border-left:0}
}

.drawer{padding-bottom:clamp(70px,10vw,130px)}
.drawer-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:15px;border-bottom:1px solid rgba(245,242,234,.13);
  margin-bottom:clamp(26px,3.4vw,38px);
}

/* 서류철은 서로 겹쳐 쌓인다. 아래 서류철의 손잡이가 위 서류철의
   띠를 살짝 덮어야 「한 서랍에 꽂힌 여러 장」으로 보인다.
   겹침이 없으면 그냥 네모 목록이다. */
.file{position:relative}
.file + .file{margin-top:-20px;transition:margin-top .4s var(--ease)}
.file:nth-of-type(1){z-index:1}
.file:nth-of-type(2){z-index:2}
.file:nth-of-type(3){z-index:3}
.file:nth-of-type(4){z-index:4}
/* 펼친 서류철은 맨 앞으로 — 아래 서류철이 내용을 덮으면 안 된다 */
.file.open{z-index:10}
/* 그런데 맨 앞으로 올리면 겹침이 거꾸로 작동한다.
   닫혀 있을 때는 다음 손잡이가 앞 서류철의 띠 「위에」 얹히지만,
   앞이 펼쳐지면 z-index 10 이 이겨서 손잡이 44px 중 20px 이 덮인다.
   손잡이는 무슨 일이 있어도 가려지면 안 된다 — 서랍에서 뽑아 든 서류철이
   뒷장을 눌러 덮지는 않는다. 그러니 뒤엣것을 끌어올리지 않는다. */
.file.open + .file{margin-top:0}

/* 손잡이 — 탭과 띠. 탭 좌우로 아무것도 삐져나오지 않는다.
   탭만 원색으로 두면 눌러 놓은 띠 위에서 스티커처럼 튄다.
   띠보다 한 단계만 밝게 — 같은 종이의 접힌 귀처럼 보여야 한다. */
.file-open{display:block;width:100%}
.file-tab{
  display:inline-flex;align-items:center;gap:11px;
  margin-left:clamp(20px,4vw,54px);
  padding:10px 24px 9px;
  background:var(--c);
  background:color-mix(in oklab,var(--c) 62%,var(--ink));
  border-radius:3px 3px 0 0;
  /* 제목이 「하겠습니다」처럼 동사만 남으므로, 명사는 이 손잡이가 댄다.
     작으면 문장이 끊긴다. 띠 제목 다음으로 또렷해야 한다. */
  font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:-.015em;
  color:#fff;
  transition:background .4s var(--ease);
}
.file-open:hover .file-tab,
.file.open .file-tab{background:color-mix(in oklab,var(--c) 80%,var(--ink))}
.file-tab .n{
  font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.62);
}
/* 닫힌 서류철의 몸통. 원색을 그대로 깔면 폭 전체가 색 막대가 되어
   2013년 플랫디자인처럼 보인다. 남색에 섞어 「물든 판」으로 낮춘다.
   원래 색은 탭에만 남긴다 — 작은 면적이라야 색이 산다. */
.file-band{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(24px,3vw,34px) clamp(24px,3.2vw,36px);
  background:var(--c);                                   /* 옛 브라우저용 */
  background:color-mix(in oklab,var(--c) 40%,var(--ink));
  border-radius:0 3px 2px 2px;
  border-top:1px solid color-mix(in oklab,var(--c) 72%,var(--ink));
  transition:background .4s var(--ease);
}
.file-open:hover .file-band{background:color-mix(in oklab,var(--c) 58%,var(--ink))}
.file.open .file-band{background:color-mix(in oklab,var(--c) 66%,var(--ink))}
.file-band .t{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(21px,2.9vw,32px);line-height:1.32;letter-spacing:-.035em;color:#fff;
}
.file-band .d{
  display:block;margin-top:8px;
  font-family:var(--sans);font-weight:400;font-size:13.5px;line-height:1.7;
  color:rgba(255,255,255,.5);
}
.file-band .go{
  flex-shrink:0;display:flex;align-items:center;gap:11px;
  font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.02em;
  color:rgba(255,255,255,.62);
}
.file-band .go .chev{
  display:block;width:9px;height:9px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .45s var(--ease);
}
.file.open .file-band .go .chev{transform:rotate(225deg) translate(-2px,-2px)}
.file.open .file-band .go .say-open{display:none}
.file-band .go .say-close{display:none}
.file.open .file-band .go .say-close{display:inline}
@media(max-width:720px){
  .file-band{flex-direction:column;align-items:flex-start;gap:16px}
  .file-band .go{align-self:flex-end}
}

/* ── 펼쳐지는 몸통 ────────────────────────────────────────
   grid-template-rows 0fr→1fr 로 높이를 모른 채 부드럽게 편다.
   max-height 로 흉내 내면 문서 길이에 따라 속도가 들쭉날쭉해진다. */
.file-body{
  display:grid;grid-template-rows:0fr;
  background:var(--c);
  background:color-mix(in oklab,var(--c) 66%,var(--ink));
  border-radius:0 0 4px 4px;
  transition:grid-template-rows .72s var(--ease-out);
}
.file.open .file-body{grid-template-rows:1fr}
/* 다른 서류철로 넘어갈 때, 열려 있던 것은 애니메이션 없이 즉시 접는다.
   서서히 줄어드는 720ms 동안에는 다음 서류철의 위치를 정확히 잴 수 없다.
   archive.js 의 openOnly() 가 이 클래스를 잠깐 붙였다 뗀다. */
.file.nosnap .file-body{transition:none}
.file-body > .inner{overflow:hidden;min-height:0}
.file-pad{padding:clamp(14px,2vw,22px) clamp(14px,2vw,22px) clamp(34px,5vw,58px)}

/* 종이는 펼쳐진 뒤 한 박자 늦게 자리를 잡는다 */
.file.open .paper{animation:paperSet .8s var(--ease-out) .1s both}
@keyframes paperSet{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* ── 종이 ─────────────────────────────────────────────────── */
/* 읽는 자리. 질감도 구멍도 여백선도 없다 — 「종이처럼 보이게」 하는
   장치였지 읽기를 돕지는 않았다. 대신 폭으로 리듬을 만든다.

   --pad 를 변수로 두는 것이 핵심이다. 아무리 깊이 박힌 요소라도
   .bleed 하나면 종이 끝까지 터져 나갈 수 있다. */
.paper{
  --pad:clamp(22px,5.2vw,96px);
  position:relative;
  background:var(--paper);
  color:var(--text);
  border-radius:2px;
  padding:clamp(38px,6vw,92px) var(--pad) clamp(56px,8vw,116px);
  overflow:hidden;
}
/* 폭은 두 갈래다. 섞으면 안 된다.

   ① 이어 읽는 글 — 62자. 그보다 길면 눈이 다음 줄 첫머리를 놓친다. */
.paper .stamp,.paper .doc-title,.paper .lede,.paper .field-v,
.paper .field-k,.paper .items,.paper .note,.paper .goal{
  max-width:62ch;
}
/*  ② 훑어보는 표와 목록 — 넓게. 연도·항목이 좌우로 갈라져야 스캔이 된다.
   여기에 62자를 먹이면 서류철 목록이 515px 로 쪼그라들고
   그 안의 숫자판까지 따라 좁아진다(실제로 그렇게 됐다). */
.paper .clauses,.paper .record,.paper .sched,.paper .picks{
  max-width:880px;
}
/* 터뜨리는 것 — 종이 폭을 끝에서 끝까지 쓴다.
   전부 같은 폭이면 무엇이 중요한지 크기로 드러나지 않는다. */
.bleed{
  margin-left:calc(var(--pad) * -1);
  margin-right:calc(var(--pad) * -1);
  padding-left:var(--pad);
  padding-right:var(--pad);
  max-width:none;
}
/* 휴대폰에서는 좌우 여백을 더 줄인다 */
@media(max-width:640px){
  .paper{--pad:20px}
}

/* ── 문서 타이포 ─────────────────────────────────────────── */
.stamp{
  display:inline-block;font-family:var(--sans);font-weight:600;
  font-size:11.5px;letter-spacing:.04em;color:var(--c);
  padding-bottom:7px;border-bottom:1px solid currentColor;margin-bottom:22px;
}
/* 글자 층은 여섯 뿐이다 — 문서제목 / 절제목 / 리드 / 본문 / 보조 / 라벨.
   층을 늘리는 대신 굵기와 색으로 나눈다. */
.doc-title{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(30px,5vw,62px);line-height:1.18;letter-spacing:-.042em;
  color:var(--text);word-break:keep-all;
}
.doc-title.sm{font-size:clamp(20px,2.5vw,27px);letter-spacing:-.028em;line-height:1.35}
.lede{
  /* 줄간 2.0 은 한글 명조 본문에 너무 넓다. 줄이 흩어져 덩어리로 안 읽힌다. */
  font-size:clamp(16.5px,1.8vw,18.5px);line-height:1.85;color:var(--text-2);
  margin-top:22px;word-break:keep-all;max-width:64ch;
}
.lede.drop::first-letter{
  float:left;font-family:var(--serif);font-weight:700;font-size:3.4em;
  line-height:.84;padding:8px 14px 0 0;color:var(--c);
}
.rule{border:0;border-top:1px solid var(--rule);margin:clamp(38px,5.5vw,64px) 0}

/* 칸 이름 — 「실행」 「저서」 처럼 한 덩이 안의 작은 머리표 */
.field-k{
  font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.04em;
  color:var(--muted);padding-bottom:10px;margin-bottom:17px;
  border-bottom:1px solid var(--rule-2);
}
/* 덩이 제목 — 「학력」 「목회 경력」 처럼 문서를 나누는 것.
   3000px 짜리 문서를 넷으로 가르는 일을 11.5px 회색 라벨에 시킬 수는 없다.
   같은 굵기로 죽 이어지면 어디서 끊기는지 보이지 않는다. */
.field-k.big{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(17px,1.9vw,20px);letter-spacing:-.025em;
  color:var(--text);
  padding-bottom:12px;margin-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.field-v{font-size:clamp(15.5px,1.7vw,16.5px);line-height:1.85;color:var(--text-2);
  word-break:keep-all;max-width:64ch}

.items{list-style:none;counter-reset:i}
.items li{
  display:grid;grid-template-columns:auto 1fr;gap:15px;
  padding:11px 0;border-bottom:1px solid var(--rule-2);
  font-size:clamp(15px,1.75vw,16.5px);line-height:1.8;color:var(--text-2);word-break:keep-all;
}
.items li:last-child{border-bottom:0}
.items li::before{
  content:counter(i,decimal-leading-zero);counter-increment:i;
  font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.06em;
  color:var(--c);padding-top:6px;
}

.record{list-style:none;border-top:1px solid var(--rule)}
.record li{
  display:grid;grid-template-columns:172px 1fr;gap:22px;
  padding:14px 2px;border-bottom:1px solid var(--rule-2);
}
.record .when{font-family:var(--sans);font-weight:500;font-size:13px;
  letter-spacing:.02em;color:var(--c);padding-top:4px}
.record .what{font-size:clamp(15px,1.75vw,16.5px);line-height:1.75;color:var(--text-2);word-break:keep-all}
.record .what b{color:var(--text);font-weight:700}
.record .what .sm{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-left:8px}
.record li.now .what b::after{
  content:"현재";margin-left:9px;padding:2px 8px;
  background:var(--c);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.02em;vertical-align:2px;
}
@media(max-width:600px){.record li{grid-template-columns:1fr;gap:5px}}

/* ── 절(공약) — 요약 먼저, 세부는 눌러서 ─────────────────────
   다섯 공약을 전부 펼쳐 두면 화면 일곱 개분이 한꺼번에 쏟아진다.
   목차도 진행 표시도 없이 그러면 어디를 읽는지 잃어버린다.
   그래서 이름과 한 문장만 먼저 보이고, 궁금한 것만 편다.

   바깥 서류철과 같은 동작이지만 「같은 얼굴」이면 안 된다.
   바깥은 색 띠, 여기는 종이 위의 얇은 줄 — 겹쳐 보이지 않게. */
/* 종이 폭을 다 쓰면 제목은 왼쪽 끝, ＋ 는 오른쪽 끝에 붙어
   가운데가 텅 빈다. 글 줄 길이에 맞춰 묶어 둔다. */
.clauses{max-width:860px;border-top:1px solid var(--rule)}
.clause{border-bottom:1px solid var(--rule-2)}

.cl-open{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:clamp(14px,2vw,22px);
  width:100%;padding:clamp(19px,2.5vw,25px) 2px;
}
.cl-no{
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.06em;
  color:var(--c);
}
.cl-h{
  display:block;font-family:var(--serif);font-weight:900;
  font-size:clamp(19px,2.3vw,25px);line-height:1.35;letter-spacing:-.03em;
  color:var(--text);word-break:keep-all;
}
.cl-s{
  display:block;margin-top:7px;
  font-family:var(--sans);font-size:14.5px;line-height:1.7;
  color:var(--muted);word-break:keep-all;
}
/* 여닫이 표시 — ＋ 가 ― 로 바뀐다. 글자가 아니라 선 두 개라 어느 글꼴에서나 같다 */
.cl-mark{
  position:relative;flex-shrink:0;width:15px;height:15px;
  align-self:center;transform:translateY(2px);
}
.cl-mark::before,.cl-mark::after{
  content:"";position:absolute;left:0;top:7px;width:15px;height:1.5px;
  background:var(--c);transition:transform .4s var(--ease);
}
.cl-mark::after{transform:rotate(90deg)}
.clause.on .cl-mark::after{transform:rotate(0)}
.cl-open:hover .cl-h{color:var(--c)}
.clause.on .cl-h{color:var(--c)}

.cl-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease-out);
}
.clause.on .cl-body{grid-template-rows:1fr}
.cl-body > .inner{overflow:hidden;min-height:0}
/* 왼쪽을 번호 칸만큼 들여써서 「이 제목에 딸린 내용」임을 보인다 */
.cl-pad{
  padding:2px 0 clamp(26px,3.4vw,34px) clamp(0px,3.4vw,38px);
  /* 폭을 가두지 않는다 — 글은 .paper 규칙이 62자로 묶고,
     숫자판은 절 폭을 다 써야 숫자가 커진다 */
}
@media(max-width:600px){.cl-pad{padding-left:0}}

.quote{
  margin-top:16px;padding-left:18px;border-left:2px solid var(--c);
  font-family:var(--serif);font-weight:700;
  /* 리드와 같은 크기다. 19 와 18.5 를 따로 두면 층만 늘고 위계는 안 생긴다 */
  font-size:clamp(16.5px,1.8vw,18.5px);line-height:1.75;color:var(--text);
  letter-spacing:-.02em;word-break:keep-all;max-width:60ch;
}
/* 터뜨린 인용 — 왼쪽 선을 버리고 색면 위 흰 글씨가 된다.
   문서 한 편에 하나면 충분하다. 둘이 넘으면 색이 흔해져 힘을 잃는다. */
.quote.bleed{
  margin-top:clamp(38px,5vw,64px);margin-bottom:clamp(38px,5vw,64px);
  padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(40px,6vw,76px);
  border-left:0;background:var(--c);color:#fff;
  font-size:clamp(21px,3.2vw,38px);line-height:1.5;letter-spacing:-.035em;
  max-width:none;
}
/* 「현재」 메모와 「목표」가 둘 다 옅은 종이색이면 구별이 안 된다.
   현재는 회색 선, 목표는 파일 색 선 — 선 하나로 나눈다. */
.goal{
  margin-top:clamp(22px,3vw,30px);
  padding:clamp(17px,2.2vw,21px) clamp(19px,2.4vw,24px);
  background:var(--paper-2);
  border-left:2px solid var(--c);
  font-size:clamp(15.5px,1.7vw,16.5px);line-height:1.85;color:var(--text);word-break:keep-all;
}
.goal::before{
  content:"목표";display:block;
  font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.04em;
  color:var(--c);margin-bottom:8px;
}

.sched{list-style:none;border-top:1px solid var(--text)}
.sched > li{
  display:grid;grid-template-columns:clamp(76px,10vw,116px) 1fr;gap:clamp(16px,2.6vw,30px);
  padding:clamp(16px,2.4vw,24px) 2px;border-bottom:1px solid var(--rule-2);
}
.sched .w{font-family:var(--serif);font-weight:900;
  font-size:clamp(19px,2.4vw,25px);line-height:1.2;color:var(--c);letter-spacing:-.02em}
.sched .l{list-style:none;display:grid;gap:8px}
.sched .l li{font-size:clamp(14.5px,1.7vw,16px);line-height:1.75;color:var(--text-2)}
.sched .l li::before{content:"—  ";color:var(--faint)}

/* ── 메모지 ───────────────────────────────────────────────
   색을 옅게. 형광에 가까우면 종이 위에서 튄다. */
.note{
  position:relative;
  padding:clamp(17px,2.2vw,21px) clamp(19px,2.4vw,24px);
  background:var(--paper-2);
  border-left:2px solid var(--rule);
  font-family:var(--sans);font-size:14.5px;line-height:1.8;
  color:var(--text-2);word-break:keep-all;
}
.note .nt{
  font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.04em;
  color:var(--muted);margin-bottom:8px;
}
/* 노랑 하나만 남긴다 — 「여기는 특별히 보아 주십시오」 */
.note-y{background:#F2EBD6;border-left-color:#C9A96A}
.note-y .nt{color:#8A6F35}

.figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);
}
/* 숫자가 둘뿐인 판은 좁은 화면에서도 나란히 둔다. 위 auto-fit 의 최소 148px 는
   서류철 안쪽 폭(휴대폰에서 271px)으로는 두 칸을 만들지 못해 세로로 쌓이는데,
   그러면 숫자판 하나가 화면 절반을 먹는다. 셋 이상은 원래대로 접히게 둔다. */
.figures.two{grid-template-columns:1fr 1fr}
.figure{background:var(--paper);padding:24px 14px;text-align:center}
.figure .v{
  font-family:var(--serif);font-weight:900;line-height:1;letter-spacing:-.04em;
  font-size:clamp(27px,3.4vw,35px);color:var(--c);
  display:flex;align-items:baseline;justify-content:center;gap:3px;
  white-space:nowrap;      /* 「4,000」과 「구좌」가 갈라서면 숫자로 안 읽힌다 */
}
/* 큰 숫자 띠 — 칸막이를 버리고 숫자만 크게 세운다.
   칸 나누기에 auto-fit + minmax(130px,1fr) 를 쓰면 안 된다.
   숫자에 nowrap 이 걸려 있어 각 칸의 최소 너비가 글자 폭까지 부풀고,
   넷이 줄을 넘어가면서 「4,000구좌」가 「4,00」으로 잘렸다.
   항목 수만큼 똑같이 나누고(minmax 의 아래값을 0 으로) 글자를 줄인다. */
.figures.big{
  margin-top:clamp(34px,4.6vw,56px);margin-bottom:clamp(34px,4.6vw,56px);
  padding-top:clamp(32px,4.2vw,50px);padding-bottom:clamp(32px,4.2vw,50px);
  gap:clamp(18px,2.6vw,34px);border:0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:transparent;
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  /* .bleed 를 쓰지 않는다 — 숫자판은 절 안에 있을 때가 많고,
     그 조상이 폭을 가두면 음수 여백은 넘치기만 하고 터지지 못한다.
     실제로 64%%까지밖에 못 가면서 「4,000구좌」를 「4,00」으로 잘랐다. */
}
.figures.big .figure{background:transparent;padding:0;text-align:left;min-width:0}
.figures.big .figure .v{
  justify-content:flex-start;
  font-size:clamp(26px,3.6vw,46px);letter-spacing:-.05em;
}
.figures.big .figure .v .u{font-size:.32em}
.figures.big .figure .k{margin-top:10px;font-size:13px}
@media(max-width:640px){
  .figures.big{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:26px 18px}
}
.figure .v .u{font-family:var(--sans);font-weight:500;font-size:.4em;color:var(--text-2)}
.figure .k{margin-top:11px;font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.6}

.snap{position:relative}
.snap img{width:100%;border:8px solid #FBF9F3;box-shadow:0 8px 22px rgba(30,25,15,.14)}
.snap figcaption{font-family:var(--sans);font-size:12px;line-height:1.7;color:var(--muted);margin-top:12px}
/* 종이 끝까지 흘려보내는 사진. 표가 길게 이어지는 문서에 장면을 하나 끼운다.
   .bleed 가 되돌려 준 좌우 여백을 사진에서만 다시 뺀다 — 사진은 가장자리에
   닿아야 「끼워 넣은 그림」이 아니라 장면이 된다. 설명글은 본문 줄에 맞춘다. */
.snap.bleed{padding-left:0;padding-right:0;
  margin-top:clamp(38px,5vw,64px);margin-bottom:clamp(38px,5vw,64px)}
.snap.bleed img{border:0;box-shadow:none;border-radius:0}
.snap.bleed figcaption{padding-left:var(--pad);padding-right:var(--pad);margin-top:14px}

/* ── 사진첩 ───────────────────────────────────────────────
   낱장(.snap)이 「문서 사이에 끼운 한 장면」이라면, 사진첩은 여러 장을
   한자리에 늘어놓는다. 서류철에 사진을 붙여 둔 쪽이다.

   칸을 4:3 으로 고정하고 사진을 잘라 채운다(object-fit:cover). 가로·세로가
   뒤섞여 들어와도 줄이 어긋나지 않는다 — 사진은 앞으로 계속 늘어날 것이고,
   그때마다 비율을 맞춰 찍어 달라고 할 수는 없다.
   자르기 전 원본은 눌렀을 때 크게 보여 준다. */
.album{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(13px,1.7vw,20px);
  margin-top:clamp(24px,3.2vw,36px);
}
@media(max-width:760px){.album{grid-template-columns:repeat(2,1fr)}}
/* 휴대폰에서도 2단을 지킨다. 1단으로 떨어뜨리면 사진 한 장이 화면을 다 먹어
   「몇 장 있는 사진」으로 보인다. 여러 자리에 계속 있었다는 것이 이 사진첩의
   내용이므로, 한눈에 여러 장이 잡히는 편이 맞다. 아주 좁은 화면에서만 1단. */
@media(max-width:359px){.album{grid-template-columns:1fr}}

.shot{margin:0}
/* 파노라마·단체사진은 두 칸을 쓴다. 4:3 으로 잘라 넣으면 양 끝에 선 사람이
   잘려 나가는데, 단체사진에서 그것은 치명적이다 — 자기를 찾으러 온 동문이
   화면 밖에 있게 된다. 아주 좁은 화면에서는 어차피 한 칸이라 되돌린다. */
.shot.wide{grid-column:span 2}
.shot.wide img{aspect-ratio:2/1}
@media(max-width:359px){.shot.wide{grid-column:span 1}}
/* 사진을 단추로 감싼다. 눌러서 크게 보는 동작이므로 키보드로도 닿아야 한다. */
.shot .go{
  display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;text-align:left;
}
.shot img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--paper-2);           /* 늦게 뜨는 동안 흰 구멍이 나지 않게 */
  border:7px solid #FBF9F3;box-shadow:0 6px 18px rgba(30,25,15,.13);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease);
}
.shot .go:hover img,.shot .go:focus-visible img{
  transform:translateY(-3px);box-shadow:0 13px 28px rgba(30,25,15,.2);
}
.shot figcaption{
  font-family:var(--sans);font-size:11.5px;line-height:1.7;
  color:var(--muted);margin-top:9px;word-break:keep-all;
}

/* ── 사진 크게 보기 ───────────────────────────────────────
   격자에서는 4:3 으로 잘라 두었으니, 여기서는 자르지 않은 원본을
   화면에 맞춰 통째로 보여 준다.
   바탕은 검정이 아니라 남색(#14213D)을 짙게 깔았다. 검정으로 덮으면
   사진만 따로 뜬 것처럼 보여 이 사이트에서 떨어져 나간다. */
.lb{
  position:fixed;inset:0;z-index:250;   /* 머리 띠 120, 알림 쪽지 200 위 */
  /* minmax(0,1fr) 이라야 한다. 그냥 1fr 이면 최소 크기가 「내용만큼」이라
     세로로 긴 사진이 칸을 밀어내고, 아래 설명글이 화면 밖으로 밀려난다.
     실제로 1000x1330 사진에서 설명이 안 보였다. */
  display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(12px,2vw,20px);
  padding:clamp(52px,6vw,74px) clamp(16px,4vw,52px) clamp(20px,3vw,34px);
  background:rgba(20,33,61,.96);
  /* 뒤의 머리 띠 글자가 흐릿하게 비쳐 읽히던 것을 뭉갠다. 지원하지 않는
     브라우저에서는 위 .96 만으로도 충분히 가려진다. */
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease),visibility .28s;
}
.lb.on{opacity:1;visibility:visible}
.lb .big{place-self:center;max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.lb .cap{
  justify-self:center;max-width:62ch;text-align:center;word-break:keep-all;
  font-family:var(--sans);font-size:12.5px;line-height:1.75;
  color:#DAD4C7;                       /* 남색(#14213D) 위 대비 10.82 — 12.5px 글씨에 넉넉하다 */
}
.lb .cap .n{display:block;margin-top:7px;font-size:11px;letter-spacing:.05em;
  color:#96A0B8}                        /* 대비 6.10 — 11px 보조 숫자에도 AA(4.5) 를 넘긴다 */
.lb .x,.lb .nav{
  position:absolute;border:0;cursor:pointer;color:#F5F2EA;
  background:rgba(255,255,255,.10);
  display:grid;place-items:center;
  font-family:var(--sans);line-height:1;
  transition:background .2s var(--ease);
}
.lb .x:hover,.lb .nav:hover,.lb .x:focus-visible,.lb .nav:focus-visible{
  background:rgba(255,255,255,.22)}
.lb .x{top:clamp(12px,2vw,20px);right:clamp(12px,2vw,20px);
  width:44px;height:44px;border-radius:50%;font-size:24px}
.lb .nav{top:50%;transform:translateY(-50%);width:46px;height:72px;font-size:26px}
.lb .prev{left:clamp(4px,1.4vw,16px)}
.lb .next{right:clamp(4px,1.4vw,16px)}
/* 사진이 한 장뿐이면 넘길 곳이 없다 */
.lb.one .nav{display:none}

@media(prefers-reduced-motion:reduce){
  .shot img{transition:none}
  .shot .go:hover img,.shot .go:focus-visible img{transform:none}
  .lb{transition:none}
}

.split,.split-3{display:grid;gap:clamp(22px,3.4vw,42px);align-items:start}
.split{grid-template-columns:1fr 1fr}
.split-3{grid-template-columns:1.45fr 1fr}
@media(max-width:760px){.split,.split-3{grid-template-columns:1fr}}

/* ── 단추 ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;
  font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.04em;
  border:1px solid var(--text);color:var(--text);background:transparent;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:var(--text);color:var(--paper)}
.btn-fill{background:var(--c);border-color:var(--c);color:#fff}
.btn-fill:hover{background:var(--text);border-color:var(--text)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

.btn-quiet{border-color:var(--rule);color:var(--muted)}
.btn-quiet:hover{background:var(--text);border-color:var(--text);color:var(--paper)}

/* ── 참여 — 섬네일이 있는 카드 ───────────────────────────────
   전에는 제목과 설명글만 있어서 「무엇을 하는 곳인지」가 글로만 있었다.
   해 보기 전에 무엇이 나올지 보이지 않으면 아무도 누르지 않는다.
   섬네일은 각 쪽의 첫 화면을 그대로 찍은 것이다 — 그림을 새로 그리면
   실제와 달라지고, 그러면 열었을 때 속은 기분이 든다. */
.picks{display:grid;gap:clamp(18px,2.6vw,26px);margin-top:clamp(26px,3.6vw,38px)}
.pick{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(20px,3vw,34px);align-items:start;
  padding-bottom:clamp(20px,2.8vw,30px);border-bottom:1px solid var(--rule-2);
}
.pick:last-child{border-bottom:0;padding-bottom:0}
.pick-th{display:block;overflow:hidden;background:var(--ink);border-radius:2px}
.pick-th img{
  width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top left;
  transition:transform .6s var(--ease-out);
}
.pick-th:hover img{transform:scale(1.035)}

.pick-no{
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.06em;
  color:var(--c);
}
.pick-t{
  margin-top:9px;font-family:var(--serif);font-weight:900;
  font-size:clamp(20px,2.5vw,27px);line-height:1.32;letter-spacing:-.03em;
  color:var(--text);word-break:keep-all;
}
.pick-d{
  margin-top:11px;font-size:clamp(15px,1.7vw,16.5px);line-height:1.8;
  color:var(--text-2);word-break:keep-all;
}
.pick-s{list-style:none;margin-top:14px;display:grid;gap:6px}
.pick-s li{font-family:var(--sans);font-size:12.5px;line-height:1.7;color:var(--muted)}
.pick-s li::before{content:"·  ";color:var(--c)}
.pick .btns{margin-top:20px;gap:8px}
.pick .btn{padding:10px 17px;font-size:12.5px;letter-spacing:.02em}

@media(max-width:720px){
  .pick{grid-template-columns:1fr;gap:16px}
}

/* ── 응원 ─────────────────────────────────────────────────── */
.form-row{margin-top:clamp(20px,2.6vw,26px)}
.form-row label{
  display:block;font-family:var(--sans);font-weight:600;font-size:11.5px;
  letter-spacing:.04em;color:var(--muted);margin-bottom:10px;
}
.form-row label .opt{letter-spacing:.03em;font-weight:400;color:var(--faint)}
.form-row label .cnt{float:right;letter-spacing:.03em;font-weight:400;color:var(--faint)}
.form-row input[type=text],.form-row textarea{
  width:100%;padding:11px 2px;background:transparent;
  border:0;border-bottom:1px solid var(--rule);border-radius:0;
  font-family:var(--serif);font-size:clamp(15.5px,1.8vw,17px);line-height:1.8;color:var(--text);
  transition:border-color .25s var(--ease);
}
.form-row input[type=text]:focus,.form-row textarea:focus{outline:none;border-bottom-color:var(--c)}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--faint)}
.form-row textarea{resize:vertical;min-height:104px}
.form-row .hint{margin-top:9px;font-family:var(--sans);font-size:12px;color:var(--faint);line-height:1.7}
.agree{display:flex;align-items:flex-start;gap:11px;margin-top:24px;cursor:pointer}
.agree input{width:17px;height:17px;margin-top:4px;accent-color:var(--c);flex-shrink:0;cursor:pointer}
.agree span{font-size:14.5px;line-height:1.75;color:var(--text-2)}
.trap{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0}
.form-msg{
  margin-top:18px;padding:13px 17px;font-family:var(--sans);font-size:13px;
  line-height:1.75;display:none;border-left:2px solid;
}
.form-msg.show{display:block}
.form-msg.ok{background:var(--paper-2);border-color:var(--c);color:var(--text-2)}
.form-msg.err{background:#EFDCD7;border-color:#8C4030;color:#5E241A}

.slips{columns:2;column-gap:18px}
@media(max-width:680px){.slips{columns:1}}
/* 응원은 왼쪽에 쓰고 오른쪽에서 읽는다.
   반쪽 폭에서는 쪽지를 한 줄로 세운다 — 두 칸으로 쪼개면 한 칸이 240px 이
   되어 「응원합니다」 한마디가 여러 줄로 토막난다.
   글쓰기 칸은 조금 좁혀도 되지만 읽는 쪽은 넓어야 한다. */
.cheer-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.cheer-split .slips{columns:1}
@media(max-width:760px){.cheer-split{grid-template-columns:1fr}}
.slip{
  break-inside:avoid;margin-bottom:18px;
  background:#FBF9F3;border:1px solid var(--rule-2);padding:20px 22px 17px;
}
.slip .tx{font-size:15px;line-height:1.9;color:var(--text-2);white-space:pre-wrap;word-break:keep-all}
.slip .by{
  margin-top:15px;padding-top:12px;border-top:1px solid var(--rule-2);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--sans);font-size:11.5px;color:var(--muted);
}
.slip .by b{font-family:var(--serif);font-size:14px;color:var(--text);font-weight:700}
.slip .by .fr{margin-left:7px}

.board-n{display:flex;align-items:baseline;gap:12px;margin-bottom:clamp(20px,2.6vw,26px)}
.board-n .v{font-family:var(--serif);font-weight:900;
  font-size:clamp(30px,4.4vw,44px);line-height:1;color:var(--c);letter-spacing:-.04em}
.board-n .k{font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.board-state{padding:clamp(34px,5.5vw,54px) 22px;text-align:center;border:1px dashed var(--rule)}
.board-state .t{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--text)}
.board-state .d{margin-top:10px;font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.85}
.spin{width:26px;height:26px;margin:0 auto 16px;border-radius:50%;
  border:2px solid var(--rule);border-top-color:var(--c);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 좋아요 ───────────────────────────────────────────────
   서류철 바깥, 꼬리 바로 위에 놓인 마지막 한 줄이다.
   전에는 응원 파일 안에 있었다. 그러면 파일을 펼친 사람만 볼 수 있는데,
   네 개를 다 펼쳐 보는 사람은 많지 않다. 접혀 있어도 늘 보여야 한다.

   여기만 종이색이다. 위(서류철)도 아래(꼬리)도 남색이라, 이 띠가 밝아지는
   것만으로 조명이 켜진 자리가 된다. 색종이와 이모지는 그다음 문제다 —
   바탕이 어두우면 무엇을 뿌려도 「축하하는 자리」로 읽히지 않는다.
   실제로 남색 위에 금색 단추만 두었을 때는 차분하기만 했다. */
.applause{
  position:relative;overflow:hidden;
  padding:clamp(56px,7.6vw,102px) 0;
  text-align:center;
  background:radial-gradient(118% 132% at 50% 6%,#FFFDF6 0%,#F7F3E7 44%,#EFE7D5 100%);
}
/* 남색과 맞닿는 자리에 금색 실선. 가장자리로 갈수록 사라지게 해서
   띠가 「잘린 면」이 아니라 「빛이 새는 틈」으로 보이게 한다. */
.applause::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent);
}
.ap-conf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.ap-in{position:relative}          /* 색종이보다 위 */

.ap-emo{
  display:flex;justify-content:center;gap:clamp(12px,1.8vw,20px);
  font-size:clamp(27px,4.2vw,42px);line-height:1;
  margin-bottom:clamp(15px,2.2vw,22px);
}
/* 셋이 같이 움직이면 기계 같다. 시차를 줘야 손뼉처럼 보인다. */
html.js .ap-emo span{animation:bob 2.8s var(--ease) infinite}
html.js .ap-emo span:nth-child(2){animation-delay:.4s}
html.js .ap-emo span:nth-child(3){animation-delay:.8s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-7deg)}}

.ap-say{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(21px,3.6vw,35px);line-height:1.45;letter-spacing:-.03em;
  color:var(--ink);word-break:keep-all;
}
.ap-burst{position:relative;display:inline-block;margin-top:clamp(24px,3.2vw,34px)}
/* 종이 위에서는 테두리만 두른 단추가 「눌러도 되나」 싶게 조용하다.
   여기 하나만은 금색을 꽉 채우고 그림자로 띄운다. */
.ap-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 32px;border-radius:2px;
  /* 금색 바탕은 종이 위에서 대비가 2.02 다 — 단추의 「가장자리가 어디까지인가」가
     기준(3.0)에 못 미친다. 그림자만으로는 화면 밝기를 낮춘 휴대폰에서 사라진다.
     같은 금색을 어둡게 내린 테두리 한 줄이면 3.54 가 나온다. */
  border:1px solid #9C7C35;
  background:var(--gold);color:var(--ink);
  box-shadow:0 6px 18px rgba(20,33,61,.17);
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.02em;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),
             background .25s var(--ease),color .25s var(--ease);
}
.ap-btn:hover{transform:translateY(-2px);box-shadow:0 11px 26px rgba(20,33,61,.24)}
/* 눌러 둔 상태는 남색으로 뒤집는다. 색만 옅게 바꾸면 눌렀는지 아닌지
   헷갈려 다시 누르다 취소하게 된다. 금·남색은 서로 7.12 로 뒤집어도 읽힌다. */
.ap-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--gold);color:var(--gold)}
.ap-btn[disabled]{opacity:.6;transform:none;cursor:default}
.ap-btn svg{display:block;flex-shrink:0}
.ap-n{
  font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:-.02em;
  padding-left:13px;border-left:1px solid currentColor;
}
.ap-d{
  margin-top:clamp(16px,2vw,20px);
  font-family:var(--sans);font-size:12.5px;line-height:1.75;color:var(--muted);
}

/* 눌린 순간 — 단추가 한 번 뛰고, 이모지가 위로 흩어진다.
   이것이 없으면 숫자만 소리 없이 바뀌어 반영됐는지 알 수 없다. */
.ap-btn.pop{animation:pop .45s var(--ease-out)}
@keyframes pop{0%{transform:scale(1)}38%{transform:scale(1.09)}100%{transform:scale(1)}}
.ap-fly{
  position:absolute;left:50%;top:4px;pointer-events:none;user-select:none;
  font-size:clamp(19px,2.4vw,25px);line-height:1;
  animation:fly 1.25s var(--ease-out) var(--d,0s) forwards;
}
@keyframes fly{
  0%{opacity:0;transform:translate(-50%,0) scale(.5)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--x,0px)),-132px) scale(1.05) rotate(var(--r,0deg))}
}
@media(prefers-reduced-motion:reduce){
  html.js .ap-emo span{animation:none}
  .ap-btn.pop{animation:none}
  .ap-btn:hover{transform:none}
  .ap-fly{display:none}
}
@media(max-width:430px){
  .ap-btn{padding:14px 24px;font-size:14px;gap:10px}
  .ap-n{font-size:18px;padding-left:11px}
  .ap-conf{opacity:.38}
}

/* ── 꼬리 ─────────────────────────────────────────────────── */
.foot{
  background:var(--ink);color:var(--faint);
  padding:clamp(46px,6vw,72px) 0 52px;
  font-family:var(--sans);font-size:12.5px;line-height:2;
  border-top:1px solid rgba(245,242,234,.09);
}
.foot-line{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;
  padding-bottom:22px;border-bottom:1px solid rgba(245,242,234,.09);margin-bottom:22px}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px}
.foot-nav a{transition:color .25s var(--ease)}
.foot-nav a:hover{color:var(--paper)}
.foot .slog{font-family:var(--serif);font-size:15px;color:var(--paper);letter-spacing:-.01em}
/* 관리 화면 문. 방문자에게 권할 것이 아니니 조용히 둔다.
   다만 관리자가 못 찾으면 그게 더 불편하므로 감추지는 않는다. */
.foot-end{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
.foot-admin{
  color:var(--faint);opacity:.6;
  border-bottom:1px solid rgba(245,242,234,.22);
  transition:opacity .25s var(--ease),color .25s var(--ease);
}
.foot-admin:hover{opacity:1;color:var(--paper);border-bottom-color:var(--paper)}

/* ── 등장 ─────────────────────────────────────────────────── */
html.js .rise{opacity:0;transform:translateY(16px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
html.js .rise.in{opacity:1;transform:none}
/* 문서 안쪽 — 표지보다 조금 짧고 얕게. 읽는 자리에서 크게 움직이면 멀미가 난다 */
html.js .paper .rise{transform:translateY(22px)}
html.js .paper .rise.in{transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html.js .rise{opacity:1;transform:none}
}

/* ── 알림 쪽지 ────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:200;
  transform:translateX(-50%) translateY(14px);
  background:var(--paper);color:var(--ink);
  padding:13px 24px;font-family:var(--sans);font-weight:500;font-size:13.5px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  box-shadow:0 14px 40px rgba(0,0,0,.5);max-width:calc(100vw - 36px);text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}