/* 예나준 — 모든 도구·가이드 하단 "이런 도구도 있어요" 공통 블록
   도구마다 자체 스타일이 달라서 yn- 접두어로만 스타일을 입혀요 */
.yn-rel { --yn-bg: #FFFFFF; --yn-card: #FAF6EF; --yn-line: #EAE2D4; --yn-text: #1F2A44; --yn-muted: #5B5F6B; --yn-accent: #A54E38;
  max-width: 760px; margin: 48px auto 0; padding: 24px 20px; background: var(--yn-bg); border: 1px solid var(--yn-line); border-radius: 20px;
  font-family: 'IBM Plex Sans KR', 'Noto Sans KR', system-ui, sans-serif; color: var(--yn-text); text-align: left; box-sizing: border-box; }
.yn-rel * { box-sizing: border-box; }
.yn-rel .yn-guide { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; background: #1F2A44; color: #FAF6EF; text-decoration: none; }
.yn-rel .yn-guide:hover { background: #151D32; color: #FAF6EF; }
.yn-rel .yn-guide .e { font-size: 22px; flex: none; }
.yn-rel .yn-guide b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.yn-rel .yn-guide small { display: block; font-size: 13px; opacity: .8; margin-top: 2px; line-height: 1.5; }
.yn-rel .yn-guide .go { margin-left: auto; font-size: 18px; flex: none; }
.yn-rel h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--yn-text); font-family: inherit; letter-spacing: -0.01em; }
.yn-rel .yn-grid { display: grid; gap: 10px; }
@media (min-width: 620px) { .yn-rel .yn-grid { grid-template-columns: repeat(3, 1fr); } }
.yn-rel .yn-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--yn-card); border: 1px solid var(--yn-line); text-decoration: none; color: var(--yn-text); transition: border-color .15s, transform .15s; }
.yn-rel .yn-card:hover { border-color: var(--yn-accent); transform: translateY(-1px); color: var(--yn-text); }
.yn-rel .yn-card .e { font-size: 22px; line-height: 1; }
.yn-rel .yn-card b { font-size: 15px; font-weight: 600; line-height: 1.4; margin-top: 4px; }
.yn-rel .yn-card span { font-size: 13px; color: var(--yn-muted); line-height: 1.6; }
.yn-rel .yn-home { display: inline-block; margin-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--yn-accent); text-decoration: none; }
.yn-rel .yn-home:hover { text-decoration: underline; }
/* 다크 모드를 지원하는 도구에서만(yn-dark) 어둡게. 페이지에서 밝게 고정하면 따라감 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .yn-rel.yn-dark { --yn-bg: #242824; --yn-card: #1F221F; --yn-line: #3A3D38; --yn-text: #E8E4DF; --yn-muted: #9A9590; --yn-accent: #E8977A; }
}
:root[data-theme="dark"] .yn-rel.yn-dark { --yn-bg: #242824; --yn-card: #1F221F; --yn-line: #3A3D38; --yn-text: #E8E4DF; --yn-muted: #9A9590; --yn-accent: #E8977A; }

/* 복잡한 계산기 상단 "계산 전에 가이드 먼저" 배너 — 페이지 색을 따라가도록 반투명 배경.
   강조색은 페이지에서 --yn-top-accent 로 바꿀 수 있어요 */
.yn-guide-top { --yn-top-accent: #A54E38;
  display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--yn-top-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--yn-top-accent) 45%, transparent);
  color: inherit; text-decoration: none; line-height: 1.5; transition: border-color .15s, background .15s; }
.yn-guide-top:hover { border-color: var(--yn-top-accent); background: color-mix(in srgb, var(--yn-top-accent) 16%, transparent); }
.yn-guide-top .yn-e { font-size: 22px; flex: none; }
.yn-guide-top .yn-t { flex: 1; min-width: 0; }
.yn-guide-top .yn-tag { display: block; font-size: 12px; font-weight: 700; color: var(--yn-top-accent); margin-bottom: 2px; }
.yn-guide-top b { display: block; font-size: 15px; font-weight: 700; }
.yn-guide-top small { display: block; font-size: 13px; opacity: .75; margin-top: 2px; }
.yn-guide-top .yn-go { flex: none; font-size: 14px; font-weight: 700; color: var(--yn-top-accent); white-space: nowrap; }
@media (max-width: 420px) { .yn-guide-top .yn-go .yn-w { display: none; } }

/* "커피 한 잔" 후원 카드 (buymeacoffee.com/yenajun) — 계산기 페이지 하단 공통 블록 안, "이런 도구도 있어요" 위.
   BMC 위젯 스크립트는 페이지를 무겁게 하고 화면 위에 떠다녀서 쓰지 않고 링크만 둬요 */
.yn-rel .yn-coffee { --yn-cf-bg: #FFF5DC; --yn-cf-line: #EED38E; --yn-cf-accent: #9A6512;
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 14px 16px; border-radius: 14px;
  background: var(--yn-cf-bg); border: 1px solid var(--yn-cf-line); color: var(--yn-text); text-decoration: none; transition: border-color .15s, transform .15s; }
.yn-rel .yn-coffee:hover { border-color: var(--yn-cf-accent); transform: translateY(-1px); color: var(--yn-text); }
.yn-rel .yn-coffee .e { font-size: 24px; flex: none; }
.yn-rel .yn-coffee .t { flex: 1; min-width: 0; }
.yn-rel .yn-coffee b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.yn-rel .yn-coffee small { display: block; font-size: 13px; color: var(--yn-muted); margin-top: 2px; line-height: 1.5; }
.yn-rel .yn-coffee .go { flex: none; font-size: 14px; font-weight: 700; color: var(--yn-cf-accent); white-space: nowrap; }
@media (max-width: 420px) { .yn-rel .yn-coffee .go { display: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .yn-rel.yn-dark .yn-coffee { --yn-cf-bg: #332B1A; --yn-cf-line: #5A4A26; --yn-cf-accent: #F0C26A; }
}
:root[data-theme="dark"] .yn-rel.yn-dark .yn-coffee { --yn-cf-bg: #332B1A; --yn-cf-line: #5A4A26; --yn-cf-accent: #F0C26A; }

/* 쿠팡 파트너스 배너 (assets/coupang.js가 내용을 채움) — 다른 카드와 같은 얇은 테두리, 배경만 살짝 다르게 */
.yn-cp { --yn-card: #FAF6EF; --yn-line: #EAE2D4; --yn-muted: #5B5F6B; --yn-pad: 16px;
  width: 100%; max-width: 760px; margin: 32px auto 0; padding: 14px var(--yn-pad) 12px; background: var(--yn-card); border: 1px solid var(--yn-line); border-radius: 16px;
  font-family: 'IBM Plex Sans KR', 'Noto Sans KR', system-ui, sans-serif; box-sizing: border-box; text-align: left; }
.yn-cp:empty { display: none; }
.yn-cp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--yn-muted); }
.yn-cp-head em { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border: 1px solid var(--yn-line); border-radius: 999px; }
.yn-cp-frame { display: flex; justify-content: center; min-height: 180px; overflow: hidden; }
.yn-cp-frame iframe { display: block; max-width: 100%; border: 0; }
.yn-cp-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--yn-muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .yn-cp.yn-dark { --yn-card: #1F221F; --yn-line: #3A3D38; --yn-muted: #9A9590; }
}
:root[data-theme="dark"] .yn-cp.yn-dark { --yn-card: #1F221F; --yn-line: #3A3D38; --yn-muted: #9A9590; }
@media (max-width: 480px) { .yn-cp { --yn-pad: 12px; } }
.yn-cp-ali { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 12px; border: 1px solid var(--yn-line); border-radius: 12px;
  background: rgba(255,255,255,.55); color: inherit; text-decoration: none; transition: border-color .15s; }
.yn-cp-ali:hover { border-color: #E5432A; }
.yn-cp-ali .e { font-size: 20px; flex: none; }
.yn-cp-ali .t { flex: 1; min-width: 0; }
.yn-cp-ali b { display: block; font-size: 14px; font-weight: 600; }
.yn-cp-ali small { display: block; font-size: 12px; color: var(--yn-muted); margin-top: 1px; }
.yn-cp-ali .go { flex: none; font-size: 16px; color: #E5432A; }
.yn-cp.yn-dark .yn-cp-ali { background: rgba(255,255,255,.04); }