@charset "utf-8";
/* ============================================================
   월간 홍대겸 — 웹매거진 C안
   톤   : 목업(처분 B안)의 딥그린 + 오렌지
   구조 : 노션 — 블록 단위, 콜아웃, 토글, 인용
   질감 : 평면. 그림자를 쓰지 않고 선과 면으로만 구분한다 (뉴모피즘 제외)
   서체 : 전부 Pretendard
   성격 : 수험서. 지면마다 맨 위에 표·요약을 두고 그 아래에서 문장으로 푼다

   원칙 1. 모바일 우선(base 360px) → 1024px에서 데스크톱 전환
   원칙 2. 글자 크기는 --fs-1 ~ --fs-7 토큰 밖의 값을 쓰지 않는다
   원칙 3. box-shadow 를 장식으로 쓰지 않는다. 구분은 border 와 배경면으로 한다
   ============================================================ */

/* ---------- 1. 토큰 ---------- */
:root{
  --green:    #1C3A30;
  --green-2:  #2F5648;
  --gray:     #6C7570;
  --paper:    #F7F8F6;   /* 지면 바탕 */
  --paper-2:  #ECEEE9;   /* 표 머리·강조면 */
  --card:     #FFFFFF;   /* 블록 면 */
  --accent:   #DD6427;
  --accent-d: #8E3A10;
  --accent-w: #FBEFE8;   /* 오렌지 아주 옅은 면 */

  --line:     rgba(28,58,48,.13);
  --line-2:   rgba(28,58,48,.26);
  --on-dark:  rgba(247,248,246,.72);

  /* 글자 크기 — 7단계. 이 밖의 값을 쓰지 말 것.
     --fscale 은 독자가 고른 배율이다. 아래 버튼이 이 값 하나만 바꾼다.
     레일과 하단 내비는 --fs-ui 를 쓰므로 배율에 끌려가지 않는다.
     좁은 화면에서 버튼이 밀려 넘치는 것을 막기 위해서다. */
  --fscale: 1;
  --fs-ui: .75rem;

  --fs-1: calc(.75rem    * var(--fscale));
  --fs-2: calc(.8125rem  * var(--fscale));
  --fs-3: calc(1rem      * var(--fscale));
  --fs-4: calc(1.0625rem * var(--fscale));
  --fs-5: calc(1.25rem   * var(--fscale));
  --fs-6: calc(1.5rem    * var(--fscale));
  --fs-7: calc(1.875rem  * var(--fscale));
  --fs-cover: clamp(3rem, 19vw, 6.5rem);

  --lh-tight: 1.3;
  --lh-snug:  1.55;
  --lh-body:  1.8;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --f-disp: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --f-body: var(--f-disp);
  --f-mono: var(--f-disp);

  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 6px;

  --rail-h: 50px;
  --rail-w: 196px;
  --nav-h:  58px;
  --pad-x:  20px;
}

@media (min-width:1024px){
  :root{
    --fs-3: 1.0625rem;
    --fs-4: 1.1875rem;
    --fs-5: 1.375rem;
    --fs-6: 1.75rem;
    --fs-7: 2.375rem;
    --pad-x: 48px;
  }
}

.rail__b em,.rail__n,.nav__n,.nav__dots,.chip,.pt__n,.hold__n,
.q__n,.q__ans,.sol__h,.case__cite,.cover__meta,.cover__list em,.end__meta,
.toc em,.toc span,.score b,.tk__i em,.ph,.tbd__t,.links i,.tools__r,.ox__q em,
.tbl,.brief__h,.pgend__k{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- 2. 리셋 ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,table{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  font-size:var(--fs-3);font-weight:400;
  line-height:var(--lh-body);letter-spacing:-.011em;
  color:var(--green);background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
::selection{background:var(--accent);color:#fff}

/* ---------- 한글 줄바꿈 ----------
   기본값은 한글을 음절 단위로 끊기 때문에 마지막 줄에 한 글자만 떨어지는 일이 잦다.
   어절(띄어쓰기) 단위로만 끊고, 한 어절이 줄을 넘길 때만 예외로 쪼갠다. */
body{
  word-break:keep-all;
  overflow-wrap:break-word;
}
h1,h2,h3,h4,
.head__t,.end__t,.pt__q,.q__stem,.story__t,.pull,.hold__q,
.toc strong,.qa__q p,.pgend__t,.links b,.tbd__t{
  text-wrap:balance;
}
p,li,td,th,dd,
.sol__b,.hold__b,.story__b,.law p,.q__box{
  text-wrap:pretty;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

/* ============================================================
   3. 뼈대
   ============================================================ */
.mag{
  position:fixed;inset:0;
  display:grid;grid-template-rows:var(--rail-h) 1fr var(--nav-h);
  background:var(--paper);
}

/* --- 3-1. 탭 레일 --- */
.rail{
  display:flex;align-items:center;gap:var(--s1);
  padding:0 var(--s3);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  background:var(--card);
  border-bottom:1px solid var(--line);
  position:relative;z-index:3;
}
.rail::-webkit-scrollbar{display:none}
.rail__b{
  flex:none;display:flex;align-items:center;gap:var(--s2);
  height:32px;padding:0 var(--s3);border-radius:var(--r-sm);
  font-size:var(--fs-ui);font-weight:600;
  color:var(--gray);white-space:nowrap;
  transition:color .16s, background .16s;
}
.rail__b em{font-style:normal;font-weight:500;opacity:.55}
.rail__n{
  font-style:normal;font-size:var(--fs-ui);font-weight:600;
  min-width:16px;height:16px;line-height:16px;text-align:center;
  border-radius:999px;background:var(--paper-2);color:var(--gray);
}
.rail__b:hover{color:var(--green);background:var(--paper)}
.rail__b[aria-selected="true"]{color:var(--accent);background:var(--accent-w)}
.rail__b[aria-selected="true"] em{opacity:.8}
.rail__b[aria-selected="true"] .rail__n{background:var(--accent);color:#fff}

/* --- 3-2. 페이지 트랙 --- */
/* .stage 는 트랙과 같은 크기의 기준면. 가장자리 화살표가 여기에 붙는다. */
.stage{position:relative;overflow:hidden;min-height:0}
.track{
  position:absolute;inset:0;
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;scrollbar-width:none;
  background:var(--paper);
}
.track::-webkit-scrollbar{display:none}

.pg{
  flex:0 0 100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  height:100%;overflow-y:auto;overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  padding:var(--s6) var(--pad-x) var(--s7);
  background:var(--paper);
}
.pg--dark{background:var(--green);color:var(--paper)}
.pg--full{padding:0}

/* --- 3-3. 하단 내비 --- */
.nav{
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;
  gap:var(--s2);padding:0 var(--pad-x);
  background:var(--card);border-top:1px solid var(--line);
  position:relative;z-index:3;
}
.nav__n{
  font-size:var(--fs-ui);font-weight:500;letter-spacing:.06em;
  text-align:center;white-space:nowrap;color:var(--gray);
  display:flex;align-items:center;justify-content:center;gap:var(--s3);
}
.nav__dots{font-style:normal;font-size:var(--fs-ui);letter-spacing:.22em;color:var(--accent)}
.nav__arr{display:flex;gap:var(--s2)}
.nav__b,.mode{
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--green);
  transition:background .16s, color .16s, border-color .16s, opacity .16s;
}
.nav__b{width:44px;height:32px;font-size:1rem;line-height:1}
.nav__b:disabled{opacity:.3;cursor:default}
.nav__b:not(:disabled):hover{color:var(--accent);border-color:var(--accent)}
.mode{height:32px;padding:0 var(--s4);font-size:var(--fs-ui);font-weight:600}
.mode:hover{color:var(--accent);border-color:var(--accent)}

/* --- 글씨 크기 --- */
.zoom{
  width:44px;height:32px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--green);line-height:1;
  display:flex;align-items:baseline;justify-content:center;gap:1px;
  transition:color .16s,border-color .16s;
}
.zoom:hover{color:var(--accent);border-color:var(--accent)}
.zoom b{font-size:.875rem;font-weight:700}
.zoom i{font-style:normal;font-size:.625rem;font-weight:600;color:var(--line-2)}
.zoom[data-level="1"] b{font-size:1rem}
.zoom[data-level="2"] b{font-size:1.125rem}
.zoom[data-level="1"] i,.zoom[data-level="2"] i{color:var(--accent)}

/* 지면 바닥에 닿으면 '다음' 화살표가 살아난다 */
body.at-end .nav__b#next:not(:disabled){
  background:var(--accent);border-color:var(--accent);color:#fff;
  animation:nudge 1.1s ease-in-out infinite;
}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

/* --- 3-4. 스크롤 모드 --- */
body.is-scroll .track{
  flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;
}
body.is-scroll .pg{flex:none;height:auto;min-height:auto;overflow:visible}
body.is-scroll .pg + .pg{border-top:1px solid var(--line-2)}
body.is-scroll .nav__arr{visibility:hidden}
body.is-scroll .pg--full{padding:0}
body.is-scroll .swipe,
body.is-scroll .hint{display:none}

/* ============================================================
   3-5. 넘길 수 있다는 신호
   ============================================================ */
/* 트랙 좌우 가장자리의 '다음 장 모서리' — 눌러도 넘어간다.
   원형으로 띄우면 본문 위를 덮으므로 가장자리에 붙는 탭 모양으로 둔다. */
.swipe{
  position:absolute;top:50%;transform:translateY(-50%);
  width:20px;height:54px;   /* 지면 좌우 여백(--pad-x)과 같은 폭이라 본문을 덮지 않는다 */
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line-2);
  color:var(--gray);font-size:var(--fs-2);line-height:1;
  z-index:4;
  transition:background .16s, color .16s, border-color .16s;
}
.swipe:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.swipe--prev{
  left:0;border-left:0;border-radius:0 var(--r-md) var(--r-md) 0;
  animation:tugL 3s ease-in-out infinite;
}
.swipe--next{
  right:0;border-right:0;border-radius:var(--r-md) 0 0 var(--r-md);
  animation:tugR 3s ease-in-out infinite;
}
.swipe[hidden]{display:none}
@keyframes tugR{0%,74%,100%{transform:translateY(-50%) translateX(0)}86%{transform:translateY(-50%) translateX(4px)}}
@keyframes tugL{0%,74%,100%{transform:translateY(-50%) translateX(0)}86%{transform:translateY(-50%) translateX(-4px)}}

/* 처음 들어왔을 때 한 번만 뜨는 안내 */
.hint{
  /* 하단 내비 위로 띄운다. 표지(딥그린)와 본문(밝은 지면) 양쪽에서 다 보여야 하므로 오렌지. */
  position:absolute;left:50%;bottom:var(--s5);
  transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s5);border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:var(--fs-2);font-weight:700;white-space:nowrap;
  z-index:5;pointer-events:none;
  animation:hintIn .4s ease-out both;
}
.hint[hidden]{display:none}
.hint b{color:#fff;font-weight:800}
@keyframes hintIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1}}
.hint.is-out{animation:hintOut .4s ease-in both}
@keyframes hintOut{to{opacity:0;transform:translateX(-50%) translateY(8px)}}

/* 지면 제목 고정 — 큰 제목이 위로 사라지면, 같은 제목이 작아진 모습으로 상단에 내려와 붙는다.
   지금 어느 지면을 보고 있는지 계속 알 수 있게 하는 장치. 누르면 지면 맨 위로 돌아간다. */
.pgbar{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;
  height:46px;padding:0 var(--pad-x);
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);opacity:0;
  pointer-events:none;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.pgbar.is-on{transform:translateY(0);opacity:1;pointer-events:auto}
.pgbar__t{
  font-size:var(--fs-3);font-weight:800;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transform-origin:left center;
  /* 큰 제목에서 줄어든 것처럼 보이도록 조금 크고 아래에서 시작한다 */
  transform:scale(1.22) translateY(4px);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.pgbar.is-on .pgbar__t{transform:scale(1) translateY(0)}
.pgbar--dark{
  background:var(--green);color:var(--paper);
  border-bottom-color:rgba(247,248,246,.18);
}

/* 지면 맨 아래 — 다음 지면 안내 */
.pgend{
  display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  margin-top:var(--s7);padding:var(--s5);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);
  transition:border-color .16s, background .16s;
}
.pgend:hover{border-color:var(--accent);background:var(--accent-w)}
.pgend__k{
  flex:none;font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;
  color:var(--accent);
}
.pgend__t{
  flex:1;font-size:var(--fs-4);font-weight:700;letter-spacing:-.025em;
  line-height:var(--lh-snug);
}
.pgend__a{flex:none;font-size:var(--fs-5);color:var(--gray)}
.pgend:hover .pgend__a{color:var(--accent)}
.pg--dark .pgend{
  background:rgba(247,248,246,.06);border-color:rgba(247,248,246,.24);
}
.pg--dark .pgend:hover{background:rgba(247,248,246,.12);border-color:var(--accent)}

/* ============================================================
   4. 정리 블록 — 이 안의 핵심
   지면·단락 맨 위에 표나 요약을 두고, 그 아래에서 문장으로 푼다
   ============================================================ */
.brief{
  margin-bottom:var(--s6);
  padding:var(--s5);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);
}
.brief__h{
  font-size:var(--fs-1);font-weight:700;letter-spacing:.02em;
  color:var(--green-2);
  padding-bottom:var(--s3);margin-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.brief > .tblw,.brief > .tblw + .tblw{margin-top:0}
.brief > .tblw + .tblw{margin-top:var(--s4)}
.brief__n{
  font-size:var(--fs-2);color:var(--gray);
  margin-top:var(--s3);line-height:var(--lh-snug);
}

/* 표 */
.tblw{
  overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r-md);
  -webkit-overflow-scrolling:touch;
}
.tbl{
  width:100%;border-collapse:collapse;
  font-size:var(--fs-2);line-height:var(--lh-snug);
}
.tbl th,.tbl td{
  padding:var(--s3) var(--s4);
  text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
.tbl tr:last-child > *{border-bottom:0}
.tbl thead th{
  background:var(--paper-2);
  font-size:var(--fs-1);font-weight:700;letter-spacing:.02em;
  color:var(--green-2);
}
.tbl thead th:first-child{width:30%}
.tbl tbody th{
  background:var(--paper);width:30%;
  font-weight:700;color:var(--green);
  border-right:1px solid var(--line);
}
.tbl td b{color:var(--accent)}
.tbl .o{color:var(--accent);font-weight:700}
.tbl .x{color:var(--gray);font-weight:700}

/* 핵심 목록 — 표로 만들기엔 애매한 것 */
.keys{margin:0}
.keys li{
  display:flex;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
  font-size:var(--fs-2);line-height:var(--lh-snug);
}
.keys li:last-child{border-bottom:0;padding-bottom:0}
.keys li:first-child{padding-top:0}
.keys em{
  font-style:normal;flex:none;font-weight:700;color:var(--accent);
  min-width:18px;
}
.keys b{display:block;font-size:var(--fs-3);margin-bottom:2px;letter-spacing:-.02em}

/* ============================================================
   5. 지면 공통
   ============================================================ */
.head{margin-bottom:var(--s6)}
.head__t{font-size:var(--fs-7);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.03em}
.head__s{font-size:var(--fs-2);color:var(--gray);margin-top:var(--s3);line-height:var(--lh-snug)}

h2.t2{
  font-size:var(--fs-6);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.025em;
  margin:var(--s7) 0 var(--s4);
  padding-top:var(--s5);border-top:1px solid var(--line-2);
}
h3.t3{
  font-size:var(--fs-5);font-weight:700;line-height:var(--lh-snug);
  letter-spacing:-.025em;margin:var(--s6) 0 var(--s3);
}
.lead{font-size:var(--fs-4);line-height:1.76;margin-bottom:var(--s5)}
p + p{margin-top:var(--s4)}
.muted{color:var(--gray)}
.src{font-size:var(--fs-2);color:var(--gray);margin-top:var(--s3);line-height:var(--lh-snug)}
mark{background:rgba(221,100,39,.18);color:inherit;padding:1px 4px;border-radius:4px}
b,strong{font-weight:700}

.chip{
  display:inline-block;font-size:var(--fs-1);font-weight:600;
  color:var(--gray);background:var(--paper-2);
  padding:3px var(--s3);border-radius:999px;
  margin:0 var(--s1) var(--s1) 0;
}
.chip--on{color:#fff;background:var(--accent)}

/* 번호 매긴 쟁점 */
.pts{margin-top:var(--s5)}
.pt{
  padding:var(--s5);margin-top:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
}
.pt:first-child{margin-top:0}
.pt__n{
  display:inline-block;font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;
  color:#fff;background:var(--accent);
  padding:2px var(--s3);border-radius:var(--r-sm);margin-bottom:var(--s3);
}
.pt__q{font-size:var(--fs-5);font-weight:700;line-height:var(--lh-snug);letter-spacing:-.025em;margin-bottom:var(--s3)}
.pt__a{font-size:var(--fs-3)}

/* 조문 — 세로줄이나 표식 없이 바탕면만 달리해서 구분한다 */
.law{
  padding:var(--s5);margin-top:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper-2);
}
.law__h{font-size:var(--fs-2);font-weight:700;color:var(--accent);margin-bottom:var(--s3)}
.law p{font-size:var(--fs-2);line-height:1.8}
.law p + p{margin-top:var(--s3)}
.law .sub{padding-left:var(--s5);color:var(--gray)}

/* 판례 */
.case__cite{
  display:inline-block;font-size:var(--fs-1);font-weight:600;
  color:var(--gray);background:var(--paper-2);
  padding:3px var(--s3);border-radius:999px;margin-bottom:var(--s3);
}
.hold{
  padding:var(--s5);margin-top:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
}
.hold__n{
  display:inline-block;font-size:var(--fs-1);font-weight:700;letter-spacing:.08em;
  color:var(--accent);margin-bottom:var(--s2);
}
.hold__q{font-weight:700;line-height:var(--lh-snug);margin-bottom:var(--s3);letter-spacing:-.02em}
.hold__b{font-size:var(--fs-2);line-height:1.82}

/* ============================================================
   6. 표지 / 뒤표지
   ============================================================ */
/* 표지 — 사진을 화면 가득 배경으로 깔고 그 위에 제목을 얹는다.
   사진이 없을 때는 딥그린 면 그대로. */
.cover{
  position:relative;min-height:100%;overflow:hidden;background:var(--green);
  display:flex;flex-direction:column;      /* 안쪽이 높이를 다 쓰게 해야 제목이 아래로 밀린다 */
}
.cover__bg{position:absolute;inset:0}
.cover__img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block}
.cover__bg::after{
  /* 배경이 흰 스튜디오 사진이다. 위는 글자가 읽힐 만큼만 덮고,
     얼굴이 있는 윗부분은 비워 두고, 제목과 목차가 얹히는 아래는 짙게 깐다.
     인물의 아랫도리가 제목 뒤로 잠기면서 잡지 표지처럼 정리된다. */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(28,58,48,.66)  0%,
    rgba(28,58,48,.30)  8%,
    rgba(28,58,48,.08) 22%,
    rgba(28,58,48,.22) 33%,
    rgba(28,58,48,.78) 45%,
    rgba(28,58,48,.96) 56%,
    rgba(28,58,48,1)   68%);
}
/* 사진이 들어오기 전까지만 보이는 표시. 사진이 놓일 윗공간에 둔다. */
.cover__note{
  position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);
  font-size:var(--fs-1);font-weight:500;letter-spacing:.04em;
  color:rgba(247,248,246,.42);white-space:nowrap;
  padding:var(--s2) var(--s4);border:1px dashed rgba(247,248,246,.22);
  border-radius:var(--r-sm);
}
.cover__in{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;
  padding:var(--s6) var(--pad-x) var(--s7);
}
.cover__meta{
  display:flex;justify-content:space-between;
  font-size:var(--fs-1);font-weight:600;letter-spacing:.1em;
  color:var(--on-dark);
  padding-bottom:var(--s4);
  border-bottom:1px solid rgba(247,248,246,.24);
}
.cover__t{
  margin-top:auto;                       /* 아래로 밀어 사진 윗부분이 드러나게 */
  font-size:var(--fs-cover);font-weight:800;
  line-height:1;letter-spacing:-.045em;
}
.cover__t span{display:block;color:var(--accent)}
.cover__s{
  font-size:var(--fs-2);color:var(--on-dark);
  margin-top:var(--s3);line-height:var(--lh-snug);
}
.cover__list{margin-top:var(--s6);border-top:1px solid rgba(247,248,246,.24)}
.cover__list li{
  display:grid;grid-template-columns:80px 1fr;gap:var(--s3);align-items:baseline;
  padding:var(--s3) 0;border-bottom:1px solid rgba(247,248,246,.14);
}
.cover__list em{font-style:normal;font-size:var(--fs-1);font-weight:700;letter-spacing:.08em;color:var(--accent)}
.cover__list span{font-size:var(--fs-2);color:var(--paper);line-height:var(--lh-snug)}

.end{
  min-height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:var(--s7) var(--pad-x);
}
.end__t{font-size:var(--fs-7);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.03em}
.end__s{font-size:var(--fs-2);color:var(--on-dark);margin-top:var(--s4);line-height:var(--lh-snug)}
.end__meta{
  font-size:var(--fs-1);font-weight:600;letter-spacing:.1em;color:var(--on-dark);
  margin-top:var(--s7);padding-top:var(--s4);
  border-top:1px solid rgba(247,248,246,.20);width:100%;max-width:280px;
}
.pg--dark .pg--dark .head__s{color:var(--on-dark)}

/* ---------- 7. 목차 — 상자 없이 타이포와 괘선만 ---------- */
.toc{margin-top:var(--s6);border-top:1px solid var(--line-2)}
.toc button{
  display:grid;grid-template-columns:26px 1fr 30px;gap:var(--s4);
  align-items:baseline;width:100%;text-align:left;
  padding:var(--s5) 0;
  border-bottom:1px solid var(--line);
  transition:color .16s;
}
.toc button:hover{color:var(--accent)}
.toc em{font-style:normal;font-size:var(--fs-1);font-weight:600;color:var(--gray)}
.toc strong{font-size:var(--fs-4);font-weight:700;letter-spacing:-.03em;line-height:var(--lh-snug)}
.toc small{
  display:block;font-size:var(--fs-2);color:var(--gray);
  font-weight:400;line-height:var(--lh-snug);margin-top:var(--s1);
}
.toc span{                       /* 실제 지면 번호. 잡지 목차의 쪽번호 자리 */
  font-size:var(--fs-2);font-weight:600;color:var(--gray);
  text-align:right;
}
.toc button:hover span{color:var(--accent)}

/* ============================================================
   8. OX / 객관식
   ============================================================ */
.ox{margin-top:var(--s5)}
.ox__i{
  padding:var(--s5);margin-top:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
}
.ox__i:first-child{margin-top:0}
.ox__q{display:flex;gap:var(--s3);align-items:flex-start;line-height:var(--lh-snug)}
.ox__q em{
  font-style:normal;font-size:var(--fs-1);font-weight:700;line-height:1.6;
  color:#fff;background:var(--accent);
  padding:1px var(--s2);border-radius:var(--r-sm);
  flex:none;align-self:flex-start;margin-top:3px;
}
.ox__btns{display:flex;gap:var(--s3);margin-top:var(--s4)}
.ox__btns button{
  font-size:var(--fs-3);font-weight:700;
  width:58px;height:40px;border-radius:var(--r-md);
  border:1px solid var(--line-2);color:var(--gray);
  transition:background .16s, color .16s, border-color .16s, opacity .16s;
}
.ox__btns button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.ox__i.done .ox__btns button{cursor:default}
.ox__i.done .ox__btns button.ok{background:var(--accent);border-color:var(--accent);color:#fff}
.ox__i.done .ox__btns button.no{opacity:.35}
.ox__a{
  display:none;font-size:var(--fs-2);color:var(--green-2);line-height:1.8;
  margin-top:var(--s4);padding:var(--s4);
  border-radius:var(--r-md);background:var(--accent-w);
}
.ox__i.done .ox__a{display:block}

.tools{display:flex;gap:var(--s3);margin-top:var(--s5);align-items:center;flex-wrap:wrap}
.btn{
  font-size:var(--fs-2);font-weight:700;letter-spacing:-.01em;
  padding:var(--s3) var(--s5);border-radius:var(--r-md);
  border:1px solid transparent;
  transition:background .16s, color .16s, border-color .16s;
}
.btn--fill{background:var(--accent);color:#fff}
.btn--fill:hover{background:var(--accent-d)}
.btn--ghost{border-color:var(--line-2);color:var(--gray)}
.btn--ghost:hover{color:var(--green);border-color:var(--green)}
.tools__r{font-size:var(--fs-2);font-weight:600;color:var(--gray)}

/* 객관식 — 한 장의 시험지 */
.q{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line-2)}
.q:first-of-type{border-top:0;margin-top:0;padding-top:0}

.qpaper{
  padding:var(--s5);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--card);
}
.q__n{
  display:block;
  font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;color:var(--gray);
  padding-bottom:var(--s3);margin-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.q__stem{font-size:var(--fs-4);font-weight:700;line-height:var(--lh-snug);letter-spacing:-.025em}

/* 사례·보기 — 시험지 안의 네모 상자 */
.q__box{
  padding:var(--s4);margin-top:var(--s4);
  font-size:var(--fs-2);line-height:1.82;
  border:1px solid var(--line-2);border-radius:3px;
  background:var(--paper);
}
.q__box h4{
  display:block;font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;
  color:var(--gray);margin-bottom:var(--s3);
}
.q__box li{display:flex;gap:var(--s3);margin-top:var(--s3)}
.q__box li:first-child{margin-top:0}
.q__box li em{font-style:normal;font-weight:700;flex:none;color:var(--green)}

/* 선택지 — 상자를 겹치지 않고 시험지 위의 줄로 */
.q__opts{margin-top:var(--s5)}
.q__opts button{
  display:flex;gap:var(--s3);width:100%;text-align:left;
  padding:var(--s3) var(--s2);
  font-size:var(--fs-2);line-height:1.75;
  border-radius:var(--r-sm);
  transition:background .14s, opacity .14s;
}
.q__opts button em{font-style:normal;flex:none;min-width:18px;font-weight:600;color:var(--gray)}
.q__opts button:hover{background:var(--paper)}
.q__opts button[aria-pressed="true"]{background:var(--paper-2)}
.q__opts button[aria-pressed="true"] em{color:var(--accent);font-weight:800}
.q.done .q__opts button{cursor:default}
.q.done .q__opts button:hover{background:none}
.q.done .q__opts button.ok{background:var(--accent-w)}
.q.done .q__opts button.ok em{color:var(--accent);font-weight:800}
.q.done .q__opts button.miss{opacity:.4}

/* 해설 — 노션 토글 */
.q__rev{margin-top:var(--s4)}
.q__rev .btn::before{content:"▸ ";font-weight:400}
.q__sol{display:none;margin-top:var(--s5)}
.q.done .q__sol{display:block}
.q.done .q__rev{display:none}
.q__ans{
  display:inline-block;font-size:var(--fs-2);font-weight:700;letter-spacing:.04em;
  color:#fff;background:var(--green);
  padding:var(--s2) var(--s4);border-radius:var(--r-sm);margin-bottom:var(--s4);
}
.sol{
  padding:var(--s5);margin-top:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
}
.sol__h{
  display:inline-block;font-size:var(--fs-2);font-weight:700;
  color:var(--accent);margin-bottom:var(--s3);
}
.sol__b{font-size:var(--fs-2);line-height:1.82}

/* ============================================================
   9. 자리 표시
   ============================================================ */
.ph{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:var(--s2);text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
  background:var(--paper-2);color:var(--gray);
  font-size:var(--fs-1);font-weight:600;letter-spacing:.1em;padding:var(--s5);
}
.ph--dark{background:rgba(247,248,246,.05);border-color:rgba(247,248,246,.26);color:var(--on-dark)}
.ph--43{aspect-ratio:4/3}
.ph--169{aspect-ratio:16/9}
.ph--11{aspect-ratio:1/1}
.ph small{font-size:var(--fs-2);font-weight:400;letter-spacing:0;line-height:var(--lh-snug)}

.yt{margin-top:var(--s5)}
.yt__f{width:100%;aspect-ratio:16/9;border:0;display:block;border-radius:var(--r-lg)}
.yt__cap{font-size:var(--fs-2);color:var(--gray);margin-top:var(--s3);line-height:var(--lh-snug)}

/* ── 영상 대신 썸네일을 걸고, 누르면 카페로 보낸다 ── */
.vlink{display:block;margin-top:var(--s5);text-decoration:none;color:inherit}
.vlink__t{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--paper-2);
}
.vlink__t img{width:100%;height:100%;object-fit:cover;display:block}
.vlink__t::after{                       /* 가운데 재생 표시 */
  content:"";position:absolute;left:50%;top:50%;
  width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:999px;
  background:rgba(28,58,48,.78);
  box-shadow:0 2px 12px rgba(0,0,0,.28);
}
.vlink__p{                              /* 삼각형 — 글꼴에 기대지 않는다 */
  position:absolute;left:50%;top:50%;z-index:1;
  width:0;height:0;margin:-10px 0 0 -6px;
  border-left:17px solid var(--paper);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.vlink__c{margin-top:var(--s3)}
.vlink__c b{display:block;font-size:var(--fs-4);font-weight:600;line-height:var(--lh-snug)}
.vlink__c span{display:block;font-size:var(--fs-2);color:var(--accent-d);margin-top:var(--s1)}
.vlink:hover .vlink__c b{text-decoration:underline;text-underline-offset:3px}

.tbd{
  position:relative;margin-top:var(--s6);
  padding:var(--s5) var(--s5) var(--s5) 52px;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
  background:var(--paper-2);text-align:left;
}
.tbd::before{
  content:"!";position:absolute;left:var(--s5);top:var(--s5);
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:var(--fs-2);font-weight:800;line-height:1;
}
.tbd__t{font-size:var(--fs-1);font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:var(--s2)}
.tbd__b{font-size:var(--fs-2);color:var(--gray);line-height:var(--lh-snug)}
.pg--dark .tbd{background:rgba(247,248,246,.05);border-color:rgba(247,248,246,.26)}
.pg--dark .tbd__b{color:var(--on-dark)}

/* ============================================================
   10. Q&A / 공부법 / 이야기 / 반려동물
   ============================================================ */
.qa{margin-top:var(--s5)}
.qa__i{
  padding:var(--s5);margin-top:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
}
.qa__i:first-child{margin-top:0}
.qa__q{display:flex;gap:var(--s3);align-items:baseline}
.qa__q em{
  font-style:normal;font-weight:800;font-size:var(--fs-2);
  color:#fff;background:var(--accent);
  width:24px;height:24px;line-height:24px;text-align:center;
  border-radius:var(--r-sm);flex:none;
}
.qa__q p{font-size:var(--fs-4);font-weight:700;line-height:var(--lh-snug);letter-spacing:-.025em}
.qa__a{display:flex;gap:var(--s3);align-items:baseline;margin-top:var(--s4)}
.qa__a em{
  font-style:normal;font-weight:800;font-size:var(--fs-2);
  color:var(--gray);background:var(--paper-2);
  width:24px;height:24px;line-height:24px;text-align:center;
  border-radius:var(--r-sm);flex:none;
}
.qa__a p{font-size:var(--fs-2);line-height:1.82}

.tk{margin-top:var(--s5)}
.tk__i{
  display:grid;grid-template-columns:28px 1fr;gap:var(--s3);
  padding:var(--s4) 0;border-bottom:1px solid var(--line);
}
.tk__i:last-child{border-bottom:0}
.tk__i em{font-style:normal;font-size:var(--fs-1);font-weight:700;color:var(--accent);padding-top:4px}
.tk__i p{font-size:var(--fs-2);line-height:1.8}
.tk__i b{display:block;font-size:var(--fs-3);margin-bottom:var(--s1);letter-spacing:-.02em}

.story{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line-2)}
.story:first-of-type{margin-top:0;padding-top:0;border-top:0}
.story__t{font-size:var(--fs-5);font-weight:800;letter-spacing:-.03em;line-height:var(--lh-snug);margin-bottom:var(--s3)}
.story__b{font-size:var(--fs-2);line-height:1.86;margin-top:var(--s4)}
.story__b p + p{margin-top:var(--s3)}
/* 수기 안의 이유 목록 — 원고에서 줄로 나열된 부분 */
.why{margin:var(--s5) 0}
.why li{
  position:relative;padding-left:var(--s5);
  margin-top:var(--s3);font-size:var(--fs-2);line-height:1.8;
}
.why li::before{
  content:"";position:absolute;left:var(--s2);top:.82em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
.story__by{font-size:var(--fs-1);color:var(--gray);margin-top:var(--s4)}

.pull{
  font-size:var(--fs-5);font-weight:700;line-height:1.55;letter-spacing:-.03em;
  color:var(--green);
  margin:var(--s6) 0;padding:var(--s5) 0;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.score{
  margin-top:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);padding:0 var(--s4);
}
.score li{
  display:grid;grid-template-columns:76px 46px 1fr;gap:var(--s3);
  align-items:baseline;padding:var(--s3) 0;
  border-bottom:1px solid var(--line);font-size:var(--fs-2);
}
.score li:last-child{border-bottom:0}
.score b{font-weight:700;color:var(--accent)}
.score span{color:var(--gray);line-height:var(--lh-snug)}

/* 본문 사진 — 잡지처럼 한 장씩 전면으로 */
.fig{margin:var(--s6) 0}
.fig img{
  width:100%;display:block;border-radius:var(--r-lg);
  background:var(--paper-2);
}
.fig figcaption,.fig__cap{
  font-size:var(--fs-1);color:var(--gray);
  margin-top:var(--s3);line-height:var(--lh-snug);
  padding-left:var(--s3);border-left:0;
}
/* 데스크톱에서는 본문 단보다 살짝 넓게 빼서 지면에 리듬을 준다 */
@media (min-width:1024px){
  .fig{margin-left:calc(var(--s7) * -1);margin-right:calc(var(--s7) * -1)}
  .fig figcaption{padding-left:var(--s7)}
}

/* 좋아요 · 공유하기 (뒤표지) */
.act{display:flex;gap:var(--s3);margin-top:var(--s7);justify-content:center;flex-wrap:wrap}
.act__b{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s5);border-radius:999px;
  border:1px solid rgba(247,248,246,.34);color:var(--paper);
  font-size:var(--fs-2);font-weight:700;
  transition:background .16s, border-color .16s, color .16s;
}
.act__b:hover{background:rgba(247,248,246,.10);border-color:var(--paper)}
.act__b:active{background:rgba(247,248,246,.18)}
.act__i{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#like[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
#like[aria-pressed="true"] .act__i{fill:currentColor;stroke:none}
.act__n{
  font-size:var(--fs-1);font-weight:700;opacity:.85;
  font-variant-numeric:tabular-nums;min-width:8px;
}
.act__n:empty{display:none}
.act__msg{
  font-size:var(--fs-1);color:var(--on-dark);
  margin-top:var(--s3);min-height:1.2em;
}

/* 뒤표지의 채널 링크 */
.chan{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s2) var(--s3);margin-top:var(--s6);
}
.chan a{
  font-size:var(--fs-2);font-weight:600;color:var(--on-dark);
  padding:var(--s2) var(--s4);border-radius:999px;
  border:1px solid rgba(247,248,246,.22);
  transition:color .16s,border-color .16s,background .16s;
}
.chan a:hover{color:var(--paper);border-color:rgba(247,248,246,.5);background:rgba(247,248,246,.08)}
.chan a[href="#"]{opacity:.45;cursor:not-allowed}

/* 자체 공유창 — 기기에 기본 공유창이 없을 때만 뜬다 */
.shsheet{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(14,20,18,.55);
  opacity:0;transition:opacity .2s;
}
.shsheet.is-on{opacity:1}
.shsheet__box{
  width:100%;max-width:420px;
  background:var(--card);color:var(--green);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--s5) var(--s5) var(--s6);
  transform:translateY(14px);transition:transform .24s cubic-bezier(.2,.8,.2,1);
}
.shsheet.is-on .shsheet__box{transform:translateY(0)}
.shsheet__t{
  font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;
  color:var(--gray);text-align:center;margin-bottom:var(--s4);
}
.shsheet__b{
  display:block;width:100%;text-align:center;
  padding:var(--s4);margin-bottom:var(--s2);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  font-size:var(--fs-3);font-weight:700;color:var(--green);
  transition:background .16s,border-color .16s;
}
.shsheet__b:hover{background:var(--accent-w);border-color:var(--accent)}
/* 카카오톡 버튼 — 카카오 노랑 */
.shsheet__b--kakao{
  background:#FEE500;border-color:#FEE500;color:#191600;
}
.shsheet__b--kakao:hover{background:#F2DA00;border-color:#F2DA00}
.shsheet__x{
  display:block;width:100%;text-align:center;
  padding:var(--s3);margin-top:var(--s3);
  font-size:var(--fs-2);font-weight:600;color:var(--gray);
}
@media (min-width:560px){
  .shsheet{align-items:center}
  .shsheet__box{border-radius:var(--r-lg);margin:0 var(--s5)}
}

/* 반려동물 — 사진을 크게 보는 피드 형식 */
.feed{margin-top:var(--s5)}
.post{
  margin-bottom:var(--s5);overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);
}
.post .ph{border:0;border-radius:0;background:var(--paper-2)}
.post__img{width:100%;display:block}
.post__b{padding:var(--s4) var(--s5) var(--s5)}
.post__n{font-size:var(--fs-4);font-weight:800;letter-spacing:-.025em}
.post__t{font-size:var(--fs-2);line-height:var(--lh-snug);margin-top:var(--s2)}
.post__by{font-size:var(--fs-1);color:var(--gray);margin-top:var(--s3)}

/* ---------- 11. 링크 지면 ---------- */
.links{margin-top:var(--s5)}
.links a{
  display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;
  padding:var(--s5);margin-bottom:var(--s3);
  border:1px solid rgba(247,248,246,.24);border-radius:var(--r-lg);
  transition:border-color .16s, background .16s, color .16s;
}
.links a:hover{color:var(--accent);border-color:var(--accent);background:rgba(247,248,246,.06)}
.links b{display:block;font-size:var(--fs-5);font-weight:700;letter-spacing:-.03em}
.links small{display:block;font-size:var(--fs-2);color:var(--on-dark);margin-top:2px}
.links i{font-style:normal;font-size:var(--fs-2);color:var(--on-dark)}
.links a[href="#"]{opacity:.45;cursor:not-allowed}

/* ============================================================
   12. 데스크톱
   ============================================================ */
@media (min-width:1024px){
  .mag{
    grid-template-columns:var(--rail-w) 1fr;
    grid-template-rows:1fr var(--nav-h);
    grid-template-areas:"rail track" "rail nav";
  }
  .rail{
    grid-area:rail;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:2px;
    overflow-x:hidden;overflow-y:auto;
    padding:var(--s5) var(--s3);
    border-bottom:0;border-right:1px solid var(--line);
  }
  .rail__b{height:auto;min-height:34px;padding:var(--s2) var(--s3);white-space:normal;text-align:left;line-height:var(--lh-snug)}
  .rail__n{margin-left:auto}
  .stage{grid-area:track}
  .nav{grid-area:nav}
  .pg{padding:var(--s8) max(var(--pad-x), calc((100% - 760px) / 2))}
  .tbl thead th:first-child,.tbl tbody th{width:34%}
  .pg--full{padding:0}
  .cover,.end{max-width:760px;margin-inline:auto}
  .cover__list li{grid-template-columns:116px 1fr}
  .swipe{width:30px;height:72px;font-size:var(--fs-4)}
}

@media (prefers-reduced-motion:reduce){
  .track{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation:none !important}
}

/* 인쇄 */
@media print{
  .rail,.nav,.swipe,.hint,.pgend{display:none}
  .mag{position:static;display:block}
  .track{display:block;overflow:visible}
  .pg{height:auto;overflow:visible;page-break-after:always;padding:0 0 var(--s7)}
  .brief,.tblw{break-inside:avoid}
}