/* =========================================================================
   연세 아이 저널 — 글 본문 (v41)
   v41.css 의 토큰 위에서 동작한다. 반드시 v41.css 다음에 불러온다.
   기존 글 16편의 마크업(.post-* / .dropcap / .pull / .evbox / .tick)을 그대로 두고
   외형만 v41 로 옮기기 위한 파일이다. 본문을 다시 쓰지 않는다.
   ========================================================================= */

/* 읽는 폭. 한글 본문은 40자 안팎에서 가장 잘 읽힌다. */
.post .wrap,
.block .wrap{max-width:760px;margin:0 auto;padding:0 var(--pad);width:100%}
.post-hero .wrap,
.post-figure .wrap{max-width:900px}

/* ---------- 머리 ---------- */
.post-hero{padding:calc(var(--gap-sec) * .7) 0 calc(var(--gap-sec) * .42)}
.crumb{font-size:13px;color:var(--mute);margin-bottom:26px}
.crumb a{color:var(--mute)}
.crumb a:hover{color:var(--accent)}
.post-cat{display:inline-block;margin-bottom:18px;font-size:13.5px;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.post-hero h1{font-size:clamp(29px,4.8vw,46px);line-height:1.26;letter-spacing:-.042em;margin-bottom:22px}
.post-hero h1 em{font-style:normal}
.post-lead{font-size:clamp(16px,1.6vw,18.5px);line-height:1.85;color:var(--copy);max-width:52ch}

.post-by{display:flex;align-items:center;gap:13px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.post-by img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.post-by > div{display:flex;flex-direction:column;line-height:1.4}
.post-by b{font-size:15px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.post-by span{font-size:13px;color:var(--mute)}
.post-date{margin-left:auto;font-size:13px;color:var(--faint);white-space:nowrap}

/* ---------- 대표 이미지 ---------- */
.post-figure{margin-bottom:calc(var(--gap-sec) * .42)}
.post-figure figure{margin:0}
.post-figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.figcap{margin-top:14px;font-size:13px;line-height:1.75;color:var(--mute)}

/* ---------- 본문 ---------- */
.post-body{padding-bottom:calc(var(--gap-sec) * .5)}
.post-body p{font-size:17px;line-height:2;color:var(--copy);margin:0 0 1.5em}
.post-body b,.post-body strong{font-weight:700;color:var(--ink)}
.post-body h2{font-size:clamp(21px,2.4vw,26px);line-height:1.4;letter-spacing:-.038em;
  margin:2.6em 0 .9em;color:var(--ink)}
.post-body h3{font-size:19px;letter-spacing:-.032em;margin:2em 0 .7em}
.post-body a{color:var(--accent);border-bottom:1px solid currentColor}
.post-body a:hover{color:var(--accent-dk)}
.post-body img{width:100%;margin:2em 0}

/* 첫 문단 강조. 드롭캡 대신 크기와 색으로 처리한다(한글 드롭캡은 잘 안 맞는다). */
.dropcap{font-size:19px !important;line-height:1.85 !important;color:var(--ink) !important;font-weight:500}

/* 인용. 큰따옴표 장식 없이 왼쪽 선 하나. */
.pull{margin:2.4em 0;padding:0 0 0 22px;border-left:2px solid var(--ink);
  font-size:clamp(19px,2.2vw,23px);line-height:1.6;letter-spacing:-.038em;font-weight:800;color:var(--ink)}
.pull em{font-style:normal;color:var(--accent)}

/* 근거 박스. 배경을 칠하지 않고 위아래 선으로 묶는다. */
.evbox{margin:2.4em 0;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ev-k{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--faint);margin-bottom:16px}
.evbox ul{display:grid;gap:12px}
.evbox li{position:relative;padding-left:16px;font-size:16px;line-height:1.85;color:var(--copy)}
.evbox li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1px;background:var(--deco)}

/* 체크 목록 */
ul.tick{display:grid;gap:14px;margin:2.2em 0}
ul.tick li{display:flex;gap:12px;font-size:16px;line-height:1.8;color:var(--copy)}
ul.tick .ic{flex:0 0 auto;width:20px;height:20px;margin-top:4px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--accent);color:var(--accent);font-size:11px;font-weight:800}

.post-note{margin-top:2.6em !important;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px !important;line-height:1.8 !important;color:var(--mute) !important}

/* ---------- 글쓴이 ---------- */
.post-author{display:grid;gap:20px;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:calc(var(--gap-sec) * .42)}
@media (min-width:640px){ .post-author{grid-template-columns:76px 1fr;gap:26px;align-items:start} }
.post-author img{width:76px;height:76px;border-radius:50%;object-fit:cover}
.pa-k{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--faint);margin-bottom:10px}
.post-author h3{font-size:19px;letter-spacing:-.035em;margin-bottom:12px}
.post-author h3 span{display:block;margin-top:5px;font-size:13.5px;font-weight:400;color:var(--mute);letter-spacing:-.02em}
.post-author p{font-size:14.5px;line-height:1.85;color:var(--copy);margin-bottom:20px}
.pa-links{display:flex;flex-wrap:wrap;gap:8px}
.pa-links .btn,.cta-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 24px;border-radius:var(--r);border:1px solid var(--ink);
  font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);background:transparent;
  transition:background-color .2s var(--e-out),color .2s var(--e-out)}
.pa-links .btn:hover,.cta-actions .btn:hover{background:var(--ink);color:#fff}
.pa-links .btn-primary{background:var(--ink);color:#fff}
.pa-links .btn-primary:hover{background:var(--dark-2);border-color:var(--dark-2)}
.arrow{display:none}

/* ---------- 이어서 읽기 ---------- */
.post-rel{padding-bottom:calc(var(--gap-sec) * .5)}
.post-rel h4{font-size:17px;letter-spacing:-.035em;margin-bottom:26px;color:var(--ink)}
.rel-grid{display:grid;gap:26px}
@media (min-width:700px){ .rel-grid{grid-template-columns:repeat(3,1fr);gap:30px} }
.rel{display:flex;flex-direction:column;padding-top:18px;border-top:1px solid var(--line)}
.rel-c{font-size:12.5px;font-weight:700;color:var(--accent);margin-bottom:10px;letter-spacing:-.02em}
.rel h5{font-size:16px;line-height:1.5;letter-spacing:-.035em;margin:0 0 12px;color:var(--ink);font-weight:700}
.rel:hover h5{color:var(--accent)}
.rel-d{margin-top:auto;font-size:12.5px;color:var(--faint)}

/* ---------- 글 끝 CTA ---------- */
.block{background:var(--dark);color:var(--on-dark-2);padding:calc(var(--gap-sec) * .62) 0}
.cta-band{display:grid;gap:26px;text-align:center}
.cta-band h3{font-size:clamp(22px,2.6vw,30px);line-height:1.38;letter-spacing:-.04em;color:#fff;margin-bottom:14px}
.cta-band p{font-size:15.5px;line-height:1.85;color:var(--on-dark-2)}
.cta-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.block .cta-actions .btn{border-color:rgba(255,255,255,.6);color:#fff}
.block .cta-actions .btn:hover{background:#fff;color:var(--ink);border-color:#fff}

/* 옛 reveal 클래스는 v41 의 등장 효과로 넘긴다. */
.reveal{transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.reveal.rv-wait:not(:has(img)){opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){ .reveal.rv-wait{opacity:1;transform:none} }

/* ---------- 저널 목록 (blog.html) ---------- */
.gj-hero{padding:calc(var(--gap-sec) * .7) var(--pad) calc(var(--gap-sec) * .45);text-align:center}
.gj-hero h1{font-size:clamp(30px,5vw,50px);line-height:1.22;letter-spacing:-.045em;margin-bottom:20px}
.gj-hero p{font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.9;color:var(--copy);max-width:52ch;margin:0 auto}

.gj-tabs{border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:var(--head-total);z-index:70;background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}
.gj-tabs-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:flex;gap:28px;height:58px;
  align-items:center;overflow-x:auto;scrollbar-width:none}
.gj-tabs-in::-webkit-scrollbar{display:none}
.gj-tabs button{flex:0 0 auto;background:none;border:0;padding:0 0 3px;cursor:pointer;
  font-size:15px;font-weight:600;letter-spacing:-.03em;color:var(--mute);border-bottom:1.5px solid transparent}
.gj-tabs button:hover{color:var(--ink)}
.gj-tabs button.on{color:var(--accent);font-weight:700;border-color:var(--accent)}

.gj-grid{display:grid;gap:44px}
@media (min-width:700px){ .gj-grid{grid-template-columns:repeat(2,1fr);gap:52px 44px} }
@media (min-width:1080px){ .gj-grid{grid-template-columns:repeat(3,1fr);gap:56px 40px} }
.gj-card{display:flex;flex-direction:column}
.gj-card .fig{overflow:hidden;background:var(--band);margin-bottom:20px}
.gj-card .fig img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s var(--e-out)}
.gj-card:hover .fig img{transform:scale(1.04)}
.gj-card .c{font-size:12.5px;font-weight:700;color:var(--accent);margin-bottom:10px;letter-spacing:-.02em}
.gj-card h3{font-size:19px;line-height:1.45;letter-spacing:-.038em;margin-bottom:12px;color:var(--ink)}
.gj-card:hover h3{color:var(--accent)}
.gj-card p{font-size:14.5px;line-height:1.8;color:var(--copy);margin-bottom:16px}
.gj-card .d{margin-top:auto;font-size:12.5px;color:var(--faint)}
.gj-card.is-hide{display:none}

/* 큰 글 한 편 (Editor's Pick) */
.gj-lead{display:grid;gap:28px;margin-bottom:calc(var(--gap-sec) * .5);
  padding-bottom:calc(var(--gap-sec) * .5);border-bottom:1px solid var(--line)}
@media (min-width:860px){ .gj-lead{grid-template-columns:1.25fr 1fr;gap:56px;align-items:center} }
.gj-lead .fig{overflow:hidden;background:var(--band)}
.gj-lead .fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--e-out)}
.gj-lead:hover .fig img{transform:scale(1.03)}
.gj-lead .c{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:12px;display:block;letter-spacing:-.02em}
.gj-lead h2{font-size:clamp(24px,3.2vw,34px);line-height:1.35;letter-spacing:-.042em;margin-bottom:16px}
.gj-lead:hover h2{color:var(--accent)}
.gj-lead p{font-size:16px;line-height:1.88;color:var(--copy);margin-bottom:18px}
.gj-lead .d{font-size:12.5px;color:var(--faint)}

@media (max-width:360px){
  .post-body p{font-size:16px}
  .post-hero h1{font-size:27px}
}

/* ── 디자인 감사 2차 ───────────────────────────────────────────────────
   ① 기사 제목(좌 295)과 본문(좌 365)이 70px 어긋나 있었다. 폭을 맞춘다. */
.post-hero .wrap{max-width:760px}
/* 대표 이미지만 의도적으로 본문 밖으로 나간다(에디토리얼 브레이크아웃). */
.post-figure .wrap{max-width:900px}

/* ② 저자 아바타 원형 제거 — 사이트 전체 이미지 radius 0 규칙. */
.post-by img,.post-author img{border-radius:0;object-position:50% 22%}

/* ③ 저널 카드 본문이 14.5px 이었다. 고령층 기준으로 올린다. */
.gj-card p{font-size:16px;line-height:1.85}
.gj-card h3{font-size:20px}
.gj-lead p{font-size:17px}
.rel h5{font-size:17px}
.post-body p{font-size:17.5px}

/* v41.2 — 고급화. v41.css 의 같은 절과 기준을 맞춘다.
   분류 라벨은 액센트 대신 --mute(규칙 3·7), 제목은 획을 가늘게. */
.post-cat,.rel-c,.gj-card .c,.gj-lead .c{color:var(--mute);font-weight:500;letter-spacing:-.005em}
.post-hero h1,.gy-pagehead h1{font-weight:680;letter-spacing:-.036em}
.post-body h2,.gj-lead h2{font-weight:680;letter-spacing:-.032em}
.post-body h3,.gj-card h3,.rel h5{font-weight:650;letter-spacing:-.028em}
.pull{font-weight:600;letter-spacing:-.03em}

/* v46.6 — 모바일 글자 (저널 카드·관련 글·글쓴이 라벨 12.5px → 13.5px) */
@media (max-width:759px){
  .gj-card .c,.gj-card .d,.gj-lead .d,.rel-c,.rel-d,.pa-k{font-size:13.5px}
}