/* ══════════════════════════════════════════════════════════
   yieldbook — 공통 토큰과 페이지 뼈대
   계산기 한 장에 있던 값을 그대로 옮겨 네 화면이 같은 종이를 쓰게 한다.
   ══════════════════════════════════════════════════════════ */

/* ── 색 ────────────────────────────────────────────────────
   흰 종이 위의 서류. 통과는 감청, 미달은 주홍. 녹색은 쓰지 않는다 —
   연녹색 종이에 녹색·빨강을 짝지으면 스프레드시트처럼 읽힌다.

   투명도가 섞인 색까지 여기 모아 둔다. 색을 다시 고를 때 이 블록만 바꾸면 된다. */
:root{
  /* 순백 종이. 입력 칸만 살짝 눌러 홈처럼 보이게 한다. */
  --paper:#FFFFFF;
  --panel:#F2F5F9;
  --ink:#101828;
  --ink-soft:#667085;
  --rule:#E1E6ED;
  --rule-soft:rgba(225,230,237,.9);

  --clear:#1570EF;                    /* 손익분기 통과 · 전체 순이익 */
  --wash-clear:rgba(21,112,239,.12);  /* 순이익 구간 바탕 */

  --seal:#D92D20;                     /* 손익분기 미달 · 부족액 */
  --wash-short:rgba(217,45,32,.12);   /* 부족 구간 바탕 */
  --seal-line:rgba(217,45,32,.40);
  --seal-wash:rgba(217,45,32,.07);

  --loan:#B4BECC;                     /* 대출금 사선 */
  --loan-gap:rgba(255,255,255,.66);   /* 사선 사이 */
  --neutral-bar:#CFD6E0;              /* 전세가 줄의 기본 몸통 */

  /* ── 글씨 ──────────────────────────────────────────────
     제목과 본문을 한 가족(Pretendard)으로 쓰고, 굵기와 크기와 자간으로만
     층을 만든다. 명조 계열 제목은 전통 서류처럼 읽혀 오래된 인상을 준다.
     성격은 숫자에서 나온다 — 금액과 비율은 고정폭 IBM Plex Mono가 맡아
     자릿수가 세로로 맞는다. */
  --display:"Pretendard Variable", Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif;
  --body:"Pretendard Variable", Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono:"IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:15px;
  line-height:1.55;
  /* 한글은 기본값이면 아무 글자에서나 줄이 넘어가 "막대 끝 / 을"처럼 낱말이
     쪼개진다. 어절 단위로 넘기게 한다. */
  word-break:keep-all;
}

.sheet{max-width:1180px;margin:0 auto;padding:0 28px 96px}

/* ── 상단 띠: 어느 화면에서든 대장으로 돌아가고 누구로 보이는지 알린다 ── */
.topbar{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:6px 20px;
  padding:16px 0 13px;
  border-bottom:1px solid var(--rule);
  font-size:12.5px;
}
.topbar a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.topbar a:hover{border-color:var(--ink)}
.topbar-mark{
  font-family:var(--display);font-size:16px;font-weight:800;
  letter-spacing:-.03em;border-bottom:0 !important;
}
/* 갈래 메뉴 — 로고 옆. 지금 있는 곳이 진하고 나머지는 물러나 있다. */
.topbar-tracks{display:flex;gap:2px;margin-left:18px}
.track-tab{
  font-size:12.5px;
  color:var(--ink-soft);
  padding:4px 10px;
  border-bottom:2px solid transparent;
  text-decoration:none;
}
.track-tab:hover{color:var(--ink)}
.track-tab[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}

.topbar-who{color:var(--ink-soft);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.topbar-who b{font-weight:500;color:var(--ink)}
.tag-owner{
  font-size:11px;font-weight:500;
  background:var(--ink);color:var(--panel);
  padding:1px 6px;
}
/* 관리자가 아닌 역할 — 같은 자리에 두되 소리를 낮춘다. 배지가 다 똑같이 진하면
   "내가 무엇을 할 수 있는 사람인가"가 눈에 들어오지 않는다. */
.tag-owner.is-quiet{background:var(--rule);color:var(--ink)}
/* 이름 옆의 로그인 아이디. 이름보다 뒤로 물러나야 한다 — 사람을 부르는 말이 먼저다. */
.tag-id{
  font-family:var(--mono);font-size:11.5px;
  color:var(--ink-soft);
}

/* ── 표제부 ─────────────────────────────────────────────── */
.masthead{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:20px 32px;
  padding:40px 0 18px;
  border-bottom:2px solid var(--ink);
}
.masthead-id{flex:1 1 520px;min-width:0}
.eyebrow{
  font-size:11.5px;font-weight:500;
  color:var(--ink-soft);
  margin:0 0 10px;
}
/* 산세리프 제목은 세리프보다 자간을 더 조여야 덩어리로 읽힌다 */
h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(31px,5vw,48px);
  line-height:1.06;
  letter-spacing:-.035em;
  margin:0;
}
.subtitle{
  margin:12px 0 0;
  max-width:64ch;
  color:var(--ink-soft);
  font-size:13.5px;
  font-weight:300;
}

/* ── 단추 ──────────────────────────────────────────────── */
.btn{
  font-family:var(--body);font-size:13px;font-weight:400;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--rule);
  border-radius:0;
  padding:7px 14px;
  cursor:pointer;
  text-decoration:none;display:inline-block;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{background:var(--panel);border-color:var(--ink-soft)}
.btn.is-solid{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.btn.is-solid:hover{background:#000;border-color:#000}
.btn.is-danger{color:var(--seal);border-color:var(--seal-line)}
.btn.is-danger:hover{background:var(--seal-wash);border-color:var(--seal)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:transparent;border-color:var(--rule)}
/* display를 준 요소에는 UA의 [hidden]{display:none}이 밀린다 — 다시 세운다 */
.btn[hidden]{display:none}

::placeholder{color:var(--ink-soft);opacity:.6;font-weight:400}

.quiet{
  font-family:var(--body);font-size:12px;
  background:transparent;border:0;
  border-bottom:1px solid var(--rule);
  color:var(--ink-soft);
  padding:3px 0;cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.quiet:hover{color:var(--ink);border-color:var(--ink)}

/* ── 알림 ──────────────────────────────────────────────── */
.notice{
  border-left:2px solid var(--ink);
  background:var(--panel);
  padding:12px 16px;
  font-size:13px;
  margin:0 0 20px;
}
.notice.is-bad{border-color:var(--seal);color:var(--seal)}
.notice.is-good{border-color:var(--clear);color:var(--clear)}
.notice[hidden]{display:none}
.notice p{margin:0}
.notice p + p{margin-top:6px}

/* 화면에서는 감추고 보조기술에만 읽히는 요약 */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

:focus-visible{outline:2px solid var(--clear);outline-offset:2px}

@media (max-width:560px){
  .sheet{padding:0 18px 64px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}