/* blogreen 공통 스타일
 *
 * 디자인 토큰은 CLAUDE.md 에 정한 값을 그대로 쓴다.
 * 메인 컬러 #0CC75F 는 밝아서 흰 글자와 대비가 2.2:1 밖에 안 된다.
 * 글자가 올라가는 면에는 원색을 쓰지 않고 --green-deep 을 쓴다.
 */

:root{
  --green:#0CC75F;        /* 메인. 면·강조. 위에 얹는 글자는 어둡게 */
  --green-deep:#067A3A;   /* 흰 글자를 쓰는 버튼·링크·숫자 (대비 5.4:1) */
  --green-tint:#E6F9EF;   /* 아주 연한 배경 */

  --ink:#0B1F16;
  --ink-soft:#4A5C53;
  --paper:#F4F6F4;
  --card:#FFFFFF;
  --line:#DCE3DE;
  --warm:#B5651D;         /* 보조 1색. 제목 분해 표시용 */

  --wrap:980px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--paper); color:var(--ink);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6;
  /* 좁은 화면에서 페이지 자체가 가로로 밀리지 않게 */
  overflow-x:hidden;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}
.hidden{display:none;}

h1{
  font-family:"Nanum Myeongjo",serif; font-weight:700;
  font-size:28px; margin:0 0 8px; letter-spacing:-.01em;
}
h2{font-family:"Nanum Myeongjo",serif; font-weight:700; font-size:20px; margin:0 0 8px;}
.lead{color:var(--ink-soft); margin:0 0 28px;}

/* ── 사이트 머리 ─────────────────────────────────────────── */
.site-header{background:var(--card); border-bottom:1px solid var(--line);}
.site-header .wrap{display:flex; align-items:center; gap:20px; min-height:60px; flex-wrap:wrap;}

.brand{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Nanum Myeongjo",serif; font-weight:700; font-size:20px;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--green);}

.site-nav{display:flex; gap:4px; flex-wrap:wrap;}
.site-nav a{
  display:inline-block; padding:8px 12px; border-radius:8px;
  color:var(--ink-soft); text-decoration:none; font-size:14px; font-weight:500;
}
.site-nav a:hover{background:var(--green-tint); color:var(--green-deep);}
.site-nav a[aria-current="page"]{background:var(--green-tint); color:var(--green-deep); font-weight:600;}

/* ── 본문 ────────────────────────────────────────────────── */
main{display:block;}

/*
 * 화면들이 <main class="wrap"> 으로 쓴다.
 * 여기서 main 만 골라 padding 을 주면 .wrap 의 padding:0 20px 에 밀려 위아래가 0이 된다.
 * 요소 선택자는 클래스 선택자보다 약하다. 같은 무게로 맞춰야 적용된다.
 *
 * 아래 여백을 넉넉히 두는 이유는 푸터가 카드와 같은 흰색이기 때문이다.
 * 가까우면 마지막 카드와 한 덩어리로 붙어 보인다.
 */
main.wrap{padding-top:32px; padding-bottom:96px;}

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:20px; margin-bottom:20px;
}

button, .btn{
  /* 손가락은 마우스 포인터보다 굵다. 누르는 것은 44px 이상 */
  min-height:44px;
  padding:12px 20px; font-size:15px; font-family:inherit; font-weight:600;
  border:0; border-radius:8px; cursor:pointer;
  background:var(--green-deep); color:#fff;   /* 원색 위에 흰 글자는 대비가 모자라 deep 을 쓴다 */
}
button:hover, .btn:hover{filter:brightness(1.08);}
button.ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line);}
button:disabled{opacity:.45; cursor:default; filter:none;}

input[type=text], input[type=email]{
  /* 16px 미만이면 iOS 사파리가 초점을 잡을 때 화면을 확대해 버린다 */
  padding:12px 14px; font-size:16px; font-family:inherit;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
input[type=text]:focus, input[type=email]:focus{
  outline:2px solid var(--green-deep); outline-offset:-1px; border-color:transparent;
}

.msg{padding:12px 14px; border-radius:8px; margin-bottom:20px; display:none;}
.msg.error{background:#FDECEC; color:#8A1C1C; border:1px solid #F3C9C9; display:block;}

/* ── 사이트 바닥 ─────────────────────────────────────────── */
.site-footer{
  background:var(--card); border-top:1px solid var(--line);
  padding:34px 0; color:var(--ink-soft); font-size:13px;
}
.site-footer .wrap{display:flex; gap:12px 24px; flex-wrap:wrap; align-items:baseline;}
.site-footer nav{display:flex; gap:16px; flex-wrap:wrap;}
.site-footer a{color:var(--ink-soft);}
.site-footer .note{margin-right:auto;}

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width:600px){
  .wrap{padding:0 14px;}
  main.wrap{padding-top:22px; padding-bottom:72px;}
  h1{font-size:23px;}
  .lead{margin-bottom:20px;}
  .card{padding:16px;}
  .site-header .wrap{gap:8px 12px; padding-top:10px; padding-bottom:10px;}
  .site-nav a{padding:7px 10px;}
}