/* ═══════════ 사이트 공통 스타일 (모든 페이지가 맨 먼저 불러옴) ═══════════
   여기 있는 것: 글꼴, 색상 변수, 상단 검은 띠, 첫 화면 머리말(hero), 책 광고판, 블로그 링크.
   페이지마다 다른 모양은 각 페이지의 <style>(1부 결과는 part1/result.css)에 있고,
   그쪽이 이 파일보다 나중에 적용되므로 같은 항목을 다시 쓰면 그 페이지에서만 바뀐다. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500;600&family=Bebas+Neue&display=swap');

:root{
  /* 바탕·글자·선 */
  --bg:#f7f4ef; --bg2:#ede9e1; --surface:#ffffff;
  --border:#ddd8ce; --border2:#c8c2b4;
  --ink:#1c1914; --ink-mid:#5a534a; --ink-dim:#a09890;
  --gold:#b8860b; --gold-lt:#f5edda;
  /* 유형 색 (M·S·F·A). -lt = 연한 배경, -mid = 반투명 강조 */
  --M:#c0392b; --M-lt:#fdf0ee; --M-mid:rgba(192,57,43,0.12);
  --S:#1a6fa8; --S-lt:#eef4fd; --S-mid:rgba(26,111,168,0.12);
  --F:#1a7a45; --F-lt:#eef8f2; --F-mid:rgba(26,122,69,0.12);
  --A:#6b3fa0; --A-lt:#f4effe; --A-mid:rgba(107,63,160,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Noto Sans KR',sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ── 상단 검은 띠 (topbar) ── */
.topbar {
  background: var(--ink);
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.topbar-l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bg2);
}
.topbar-r {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(240,236,228,0.35);
  letter-spacing: 0.1em;
}
.topbar-r a { color: inherit; text-decoration: none; }
.topbar-r a:hover { color: var(--bg2); }

/* ── 첫 화면 머리말 (첫 페이지·1부·2부 검사 화면) ── */
.hero {
  background: var(--surface);
  border-bottom: 2px solid var(--ink);
  padding: 60px 48px 56px;
  position: relative;
  overflow: hidden;
}
.hero-wm {
  position: absolute;
  right: 20px;
  bottom: -24px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 200px;
  color: var(--bg2);
  letter-spacing: 0.05em;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.hero-inner { max-width: 800px; margin: 0 auto; position:relative; z-index:1; }
h1 .accent { color: var(--gold); }

/* ── 책 광고판 (첫 페이지·1부 결과·2부 결과). 구매 링크 주소는 각 HTML에 있음 ── */
.ad-board{
  display:flex; align-items:stretch;
  background:var(--ink); color:var(--bg);
  text-decoration:none; position:relative; overflow:hidden;
  transition:transform 0.15s, box-shadow 0.2s;
}
.ad-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.ad-links .ad-cta{margin-top:0; text-decoration:none; transition:opacity 0.15s}
.ad-links .ad-cta:hover{opacity:0.85}
.ad-links .ad-cta:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.ad-wm{
  position:absolute; right:14px; bottom:-18px;
  font-family:'Bebas Neue',sans-serif; font-size:120px; line-height:1;
  color:rgba(247,244,239,0.05); letter-spacing:0.05em;
  pointer-events:none; user-select:none;
}
.ad-cover{
  width:168px; flex-shrink:0; padding:22px;
  background:#26221b; border-right:1px solid rgba(247,244,239,0.08);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.ad-cover img{width:100%; height:auto; display:block; box-shadow:0 6px 18px rgba(0,0,0,0.45)}
.ad-ph{
  display:none; width:100%; aspect-ratio:2/3;
  border:1px solid rgba(184,134,11,0.55);
  align-items:center; justify-content:center; text-align:center;
  font-size:15px; font-weight:900; line-height:1.45; color:var(--gold);
}
.ad-info{flex:1; padding:30px 30px 28px; position:relative; z-index:1}
.ad-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:0.22em; color:var(--gold); text-transform:uppercase; margin-bottom:12px;
}
.ad-head{font-size:22px; font-weight:900; line-height:1.38; color:var(--bg); margin-bottom:10px; word-break:keep-all}
.ad-copy{font-size:13.5px; line-height:1.78; color:rgba(247,244,239,0.66); word-break:keep-all}
.ad-cta{
  display:inline-block; margin-top:20px;
  background:var(--gold); color:var(--ink);
  padding:11px 22px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:0.16em;
}

/* ── Ocean Drive 블로그 링크 ── */
/* 첫 페이지: 광고판 안의 작은 글자 링크 */
.ad-blog{display:inline-flex; align-items:center; min-height:44px; margin-top:8px;
  color:var(--bg); font-size:14px; font-weight:600; letter-spacing:0.01em;
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(247,244,239,0.45)}
.ad-blog:hover{text-decoration-color:var(--gold)}
.ad-blog:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
/* 1부·2부 결과: 광고판 바로 아래 보조 버튼 */
.blog-cta{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 16px;
  margin-top:12px; padding:18px 20px; background:var(--surface); border:1px solid var(--border)}
.blog-cta-text{margin:0; font-size:15px; font-weight:700; line-height:1.5; color:var(--ink); word-break:keep-all}
.blog-cta-btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px;
  background:transparent; color:var(--ink); border:1px solid var(--ink);
  font-size:14px; font-weight:700; text-decoration:none; word-break:keep-all; transition:background 0.15s, color 0.15s}
.blog-cta-btn:hover{background:var(--ink); color:var(--bg)}
.blog-cta-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ── 휴대폰 화면 (폭 640px 이하) ── */
@media (max-width:640px){
  .topbar,.hero{padding-left:20px;padding-right:20px}
  .hero-wm{display:none}
  .ad-cover{width:108px;padding:14px}
  .ad-info{padding:20px 18px 20px}
  .ad-head{font-size:17px}
  .ad-copy{font-size:12.5px}
  .ad-cta{margin-top:14px;padding:10px 16px}
  .ad-links{margin-top:14px}
  .ad-wm{display:none}
  .blog-cta{padding:16px}
  .blog-cta-btn{width:100%}
}

/* ── 기초적인 복사 방지: 글자 선택·이미지 끌기 막기 (우클릭·단축키는 assets/protect.js) ── */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }
/* 예외: 입력칸, 1부 결과 이미지 카드(길게 눌러 저장 가능해야 함) */
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.rsm-frame img, #share-img { -webkit-user-select: auto; user-select: auto; -webkit-touch-callout: default; -webkit-user-drag: auto; }