/* 라벨용 — Gumroad 의 ABC Favorit 은 유료다. 그 결(기하학적 그로테스크·넓은 자간)에
   가장 가까우면서 «흔하지 않은» 무료 폰트로 Space Grotesk 를 쓴다.
   🔴 Inter·Roboto·Noto 는 서방님이 금하신 «흔한 글씨체»다. */


/* ═══════════════════════════════════════════════════════════════
   Gen15 · 2026-08-27

   서방님이 「좋다」고 하신 것 = 당근 홈의 상단 검색창과 주변 버튼들.
   그래서 이 파일의 값은 내 취향이 아니라 **당근 실측치**다.

   실측 (daangn.com · 1440px):
     · 헤더           64px · 로고만 (메뉴 없음)
     · 제목           가운데 정렬
     · 검색창 form    754×48 · radius 9999 · border 1px #DCDEE3 · padding-left 20
     · 검색 input     638×48 · 배경 투명 · 테두리 없음 · 16px/400
     · 검색 버튼      우측 원형, 짙은 잉크
     · 인기 검색어    칩이 아니라 «텍스트 링크» 한 줄
     · 그 아래        원형 파스텔 아이콘 8개 + 라벨
     · 콘텐츠         번호 + 제목 + 썸네일 리스트
     · 배경           #FFFFFF / 눌린 면 #F3F4F5
     · 잉크           #1A1C20
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── 바탕 ─────────────────────────────────────────────
     🔴 흰색이 아니다. Gumroad 실측 rgb(244,244,240) — 종이에 가까운 크림.
        흰 바탕은 «비어 보이고», 크림 바탕은 «면»으로 읽힌다. */
  --bg:#F4F4F0;
  --bg-2:#FFFFFF;        /* 카드가 «흰 종이»로 떠오른다 — 바탕과 반대로 뒤집었다 */
  --bg-3:#EDEDE7;
  --ink:#000000;         /* Gumroad 는 순검정을 쓴다 */
  --ink-2:#3D3D3A;
  --ink-3:#63635E;
  --line:#000000;        /* 테두리도 검정. 회색 선은 «흐릿함»의 원인이었다 */
  --line-soft:#DCDCD6;

  /* 브랜드 — 노랑을 «크게» 쓴다. 지금까지는 원 8개에만 썼다. */
  --pop:#FFC53D;
  --pop-2:#FFD976;
  --pop-3:#FFF1D0;
  --pop-ink:#3A2900;

  /* 판정 */
  --yes:#0A6B4A;  --yes-bg:#C9F2DE;
  --no:#A8322F;   --no-bg:#FFD9D6;
  --blue-bg:#D6E4FF;
  --pur-bg:#EADCFF;

  /* 카테고리 타일 — 파스텔이 아니라 «채도 있는 면» */
  --t1:#FFE3A3; --t2:#C9F2DE; --t3:#FFD9D6; --t4:#D6E4FF;
  --t5:#EADCFF; --t6:#C7F0F2; --t7:#FFDCC2; --t8:#E4E4DC;

  /* ── 모서리 ────────────────────────────────────────────
     실측: 알약 125개 · 4px 14개. «중간 라운드»가 거의 없다.
     12~22px 라운드가 화면을 무르고 밋밋하게 만들고 있었다. */
  /* 🔴 서방님 2026-08-27 「각 박스의 모서리를 둥글게해라」
     Gumroad 실측은 4px 이었지만 지시가 위다. 한 토큰만 바꿔 전 요소를 함께 움직인다. */
  --r:16px;
  --r-s:11px;
  --r-lg:22px;
  --r-pill:9999px;

  --wrap:1200px;
  --gut:24px;

  /* ── 그림자 ────────────────────────────────────────────
     이 언어에서 깊이는 흐린 그림자가 아니라 «단단한 오프셋 그림자»다. */
  --sh-hard:4px 4px 0 #000;
  --sh-hard-2:6px 6px 0 #000;
  --sh-hard-s:2px 2px 0 #000;
  --sh-soft:0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.06);

  --spring:linear(0,.0072 3.4%,.0286 6.9%,.1102 13.9%,.4085 30.2%,.5333 36.3%,.6435 42.4%,
    .7343 48.6%,.8109 55.1%,.8713 61.7%,.9186 68.7%,.9536 76.1%,.9776 84.1%,.9924 92.6%,1);
  --spring-b:linear(0,.0093 3.4%,.0369 6.9%,.1409 13.9%,.5124 30.2%,.6607 36.3%,.7877 42.4%,
    .8888 48.6%,.9648 55.1%,1.0174 61.7%,1.0495 68.7%,1.0647 76.1%,1.0665 84.1%,1.0596 92.6%,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:16px;line-height:1.6;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* ── 컨테이너 ──────────────────────────────────────────────
   🔴 쪽마다 폭이 달라(820/900/1000/1200) 같은 사이트로 안 보였다.
      그리고 «.narrow» 는 정의 없이 쓰이고 있어 화면 폭 전체로 퍼졌다 —
      없는 클래스는 조용히 아무 일도 하지 않는다.
   .wrap   = 기본 폭 (히어로·격자·그림이 있는 층)
   .narrow = 읽기 폭 (긴 글·폼처럼 한 줄이 길면 읽기 힘든 곳) */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}
.narrow{max-width:860px;margin:0 auto;padding:0 var(--gut);width:100%}

/* ── 타입 ─────────────────────────────────────────────────── */
/* ── 타이포 ────────────────────────────────────────────────
   Gumroad 실측: 96 / 72 / 48 / 16px, 무게 400~500, 자간 -0.4px(≈-.004em), 줄높이 1.0.
   🔴 «굵게»가 아니라 «크게»가 이 언어다. 32px 무게 800 은 작고 답답했다.
   한글은 라틴보다 글자 폭이 커서 같은 px 라도 더 꽉 찬다 — 무게를 500~600 으로 둔다. */
.t1{font-size:clamp(38px,5.6vw,72px);line-height:1.02;letter-spacing:-.035em;
  font-weight:600;margin:0}
.t2{font-size:clamp(28px,3.6vw,48px);line-height:1.06;letter-spacing:-.03em;
  font-weight:600;margin:0}
.t3{font-size:clamp(19px,1.6vw,23px);line-height:1.3;letter-spacing:-.02em;
  font-weight:600;margin:0}
.tx{font-size:16px;line-height:1.62;margin:0}
.tx-s{font-size:14.5px;line-height:1.58;margin:0}
.tx-c{font-size:13px;line-height:1.5;margin:0;color:var(--ink-3)}
.dim{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* 판정은 «면»이 아니라 글자다 */
.v{font-weight:700;white-space:nowrap}
.v-y{color:var(--yes)}
.v-n{color:var(--no)}

/* ── 헤더 — 당근처럼 로고만 ───────────────────────────────── */
/* 떠 있는 층 — 내용이 «아래로 지나간다». 불투명한 띠가 화면을 잘라먹지 않는다. */
/* ── 헤더 ──────────────────────────────────────────────────
   실측: 밑에 검정 선, 반투명 없음. 유리 재질은 이 언어와 맞지 않는다. */
.hd{height:68px;display:flex;align-items:center;background:var(--bg);
  position:sticky;top:0;z-index:60;border-bottom:1.5px solid var(--ink)}
.hd-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%;
  display:flex;align-items:center;gap:14px}
.hd-mark{display:flex;align-items:center;gap:9px;flex:none}
.hd-mark b{font-size:19px;font-weight:700;letter-spacing:-.035em}
.hd-right{margin-left:auto;display:flex;gap:4px;align-items:center}
.hd-link{font-size:15px;font-weight:500;color:var(--ink);padding:9px 14px;
  border-radius:var(--r-pill);transition:background .16s ease-out, color .16s ease-out}
.hd-link:hover{background:var(--ink);color:var(--bg)}
.hd-link:focus-visible,.hd-mark:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 🔴 좁은 화면에서 헤더 링크 5개가 392px 까지 밀려 «가로 스크롤»을 만들었다.
   글자 크기를 키운 대가다. 모바일에서는 로고만 남긴다 —
   탐색은 히어로의 분야 버튼 8개와 푸터가 맡는다(당근·Gumroad 모바일과 같은 처리). */
@media(max-width:760px){
  .hd{height:60px}
  .hd-right{display:none}
  .hd-mark b{font-size:17px}
}


/* ── 버튼 ──────────────────────────────────────────────────
   이 언어의 깊이는 흐린 그림자가 아니라 «단단한 오프셋 그림자»다.
   누르면 그림자가 사라지며 버튼이 실제로 «눌려 들어간다». */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:16px;font-weight:600;letter-spacing:-.02em;cursor:pointer;
  padding:14px 26px;border-radius:var(--r-pill);border:1.5px solid var(--ink);
  background:var(--ink);color:var(--bg);text-decoration:none;
  box-shadow:var(--sh-hard-s);
  transition:transform .1s ease-out, box-shadow .1s ease-out, background .18s ease-out}
.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-hard)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 #000}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn-pop{background:var(--pop);color:var(--ink)}
.btn-line{background:var(--bg-2);color:var(--ink)}

.ft{border-top:1px solid var(--line-2);padding:36px 0 32px;margin-top:8px;background:var(--bg-2)}
.ft a{color:var(--ink-2)}
.ft a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

:focus-visible{outline:3px solid var(--pop);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media(max-width:720px){
  .hd{height:56px}
  .hd-right{gap:2px}
  .hd-link{padding:6px 8px;font-size:13.5px}
}