/* ══════════════════════════════════════════
   칼퇴서류 · 홈 쇼케이스 전용 스타일
   ──────────────────────────────────────────
   홈만 쓰는 규칙이라 공통 style.css 와 분리했다.
   72개 도구 페이지는 이 파일을 읽지 않는다.

   ⚠ 히어로 오브젝트 교체 지점
     index.html 의 .hero-obj 안 <img src> 만 바꾸면 됩니다.
     배경이 뚫린 투명 PNG 여야 흰 바탕에 자연스럽게 얹힙니다.
   ══════════════════════════════════════════ */

/* 홈은 흰 바탕 한 벌로 잠근다. 중간에 어두운 섹션이 끼면 다른 사이트에 온 것처럼 보인다 */
body.home{ background:#fff; color:var(--ink) }
/* 헤더 안쪽 폭이 1320px 로 묶여 있어 넓은 화면에서 로고가 가운데로 밀린다.
   히어로는 화면 왼쪽 끝에 붙어 있어 둘이 어긋나 보인다. 같은 여백에 맞춘다 */
body.home .site-header .inner{
  max-width:none; padding-left:clamp(20px,3.4vw,56px); padding-right:clamp(20px,3.4vw,56px);
}

/* ── 1. 히어로 ─────────────────────────
   bhroovi 구도 그대로.
     위      한 줄짜리 텍스트 바 (좌 링크 · 소개 문장 · 우 링크)
     가운데  거대한 검은 글씨 두 줄, 왼쪽 정렬
     오른쪽  떠 있는 오브젝트
     아래    해시태그 세 묶음
   사진 배경은 없앴다. 흰 바탕에 글씨만 남기는 것이 이 구도의 핵심이다. */
/* 100svh 로 두면 상단 헤더 높이만큼 첫 화면을 넘어가
   해시태그 줄이 잘린다. 헤더를 빼고 남는 높이를 쓴다 */
/* 한 화면(100svh)을 통째로 잡으면 내용이 400px 남짓인데 위아래가 크게 비어 버린다.
   높이는 내용에 맡기고 여백만 정한다 */
.sc-hero{
  position:relative; background:#fff;
  display:flex; flex-direction:column;
  /* 목표 높이 550~650px. 내용이 277~413px 로 폭마다 달라
     여백만으로는 작은 폭에서 모자라므로 min-height 로 바닥을 받친다 */
  min-height:560px;
  padding:clamp(56px,9vh,112px) clamp(20px,3.4vw,56px) clamp(64px,10vh,124px);
}

/* 상단 텍스트 바 — 상자도 배경도 없다 */
.hero-top{
  display:flex; align-items:baseline; gap:clamp(20px,4vw,64px);
  padding:26px 0 0; font-size:15px;
}
.hero-top a{
  font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:-.01em;
  transition:opacity var(--t-fast) var(--ease);
}
.hero-top a:hover{ opacity:.55 }
.hero-top p{ margin:0; color:var(--ink); font-weight:400 }
.hero-top .right{ margin-left:auto }

/* 가운데 — 글씨·오브젝트·태그를 한 덩어리로 모은다.
   화면 양끝으로 벌려 놓으면 가운데가 텅 비어 구도가 무너진다.
   레퍼런스는 셋이 서로 붙어 하나의 블록으로 읽힌다. */
.hero-main{
  /* 블록 전체를 화면 가운데에 놓는다. 왼쪽 끝에 붙으면 오른쪽이 텅 빈다 */
  display:grid;
  grid-template-columns:auto auto;
  justify-content:center; align-content:center; align-items:end;
  column-gap:clamp(20px,3vw,52px);
  padding:0;
}
.sc-hero h1{
  grid-column:1;
  /* 한글은 획이 많아 같은 굵기라도 라틴보다 훨씬 무겁게 보인다.
     굵기를 낮추고 자간을 풀어 레퍼런스의 가벼운 인상에 맞춘다 */
  /* 두 줄 사이를 넉넉히 (이전 1.0 에서 두 배 가까이) */
  font-size:clamp(46px,9.6vw,150px); font-weight:500; line-height:1.34;
  letter-spacing:-.022em; color:var(--ink); margin:0; white-space:nowrap;
}


/* 오른쪽 오브젝트 — 남의 브랜드 블롭 대신 이 사이트가 만드는 것을 띄운다 */
/* 오브젝트와 태그는 한 덩어리로 움직인다. 따로 두면 사이가 벌어져 구도가 흩어진다 */
.hero-right{
  grid-column:2; align-self:end;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(8px,1.4vh,20px);
}
.hero-obj{
  width:clamp(150px,17vw,264px); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
/* 배경이 투명한 PNG 라 블렌드 모드가 필요 없다 */
.hero-obj img{ width:100%; height:100%; object-fit:contain; display:block }
@media (prefers-reduced-motion:no-preference){
  .hero-obj img{ animation:float 8s ease-in-out infinite }
}
@keyframes float{ 0%,100%{ transform:translateY(-10px) } 50%{ transform:translateY(10px) } }
/* 영상 자체가 움직이므로 떠다니는 애니메이션은 뺀다 */

/* 아래 — 해시태그 세 묶음 */
.hero-tags{
  display:grid; grid-template-columns:repeat(3,max-content);
  gap:0 clamp(18px,2.6vw,44px); margin:0;
  font-size:clamp(13px,1.05vw,17px); font-weight:700; letter-spacing:-.01em;
}
.hero-tags ul{ list-style:none; margin:0; padding:0 }
.hero-tags li{ margin-bottom:7px; white-space:nowrap }
.hero-tags a{ color:var(--ink); text-decoration:none; transition:color var(--t-fast) var(--ease) }
.hero-tags a:hover{ color:var(--stamp) }

@media (max-width:820px){
  .hero-top{ flex-wrap:wrap; gap:10px 20px; font-size:13.5px }
  .hero-top p{ order:3; width:100%; color:var(--ink-2) }
  .hero-top .right{ margin-left:auto }
  .hero-main{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; gap:var(--s4) }
  .sc-hero h1{ grid-column:1; white-space:normal }
  /* ⚠ 예전에는 좁은 화면에서 오브젝트를 숨겼다. 세로로 쌓으면 자리를
       많이 먹어서였는데, 그러면 모바일에서 이 사이트의 얼굴이 통째로 사라진다.
       숨기는 대신 태그 옆에 나란히 놓는다 — 가로 공간을 쓰므로
       세로 길이는 거의 늘지 않는다. */
  .hero-right{
    grid-column:1;
    flex-direction:row-reverse;        /* DOM 순서가 오브젝트→태그라 뒤집어야 태그가 왼쪽 */
    align-items:flex-end; justify-content:space-between;
    gap:var(--s3); width:100%;
  }
  .hero-obj{
    display:flex; flex:none;
    width:clamp(84px,24vw,150px);
  }
  .hero-tags{ grid-template-columns:repeat(2,max-content); gap:0 var(--s4) }
}


/* ══════════════════════════════════════════
   도구함 유리 — 아이폰식 반투명 판
   유리는 뒤에 색이 있어야 보인다. 목록 구간에 옅은 색을 깔고
   그 위에 반투명 카드를 띄운다.
   (애플 플랫폼의 Liquid Glass 가 아니라 backdrop-filter 로 만든 웹 근사치)
   ══════════════════════════════════════════ */
body.home .tool-section{ position:relative }
body.home #toolSections{ position:relative }
/* 광원(radial-gradient)을 깔았더니 글자 뒤로 분홍·하늘색이 비쳐 지저분했다.
   유리 재질은 흰 바탕에서도 테두리와 그림자만으로 충분히 판처럼 읽힌다 */

body.home .tool-card{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
          backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(0,0,0,.03),
    0 10px 26px rgba(0,0,0,.05);
  margin:0;
  transition:background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
/* 판이 생겼으니 칸을 나누던 얇은 선은 필요 없다 */
body.home .tool-card::before{ display:none }
body.home .tool-card:hover{
  background:#fff; transform:translateY(-3px); border-color:var(--line-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(0,0,0,.05),
    0 18px 40px rgba(0,0,0,.09);
}
body.home .tool-card:active{ transform:translateY(-1px) }
body.home .tool-grid{ gap:14px }

/* 검색창과 칩도 같은 재질로 */
body.home #toolSearch{
  background:var(--bg-2);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
          backdrop-filter:blur(20px) saturate(140%);
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(0,0,0,.05);
}
body.home #toolSearch:focus{ background:rgba(255,255,255,.92) }
body.home #chips .chip{
  background:var(--bg-2);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  border:1px solid transparent;
}
body.home #chips .chip:hover{ background:#e8e8ed }
body.home #chips .chip[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* 투명도를 낮춘 사용자에게는 불투명하게 */
@media (prefers-reduced-transparency:reduce){
  
  body.home .tool-card,body.home #toolSearch,body.home #chips .chip{
    background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; border-color:var(--line);
  }
}
/* 히어로에서 도구 목록으로 넘어가는 자리.
   붙어 있으면 어디서 끝나고 어디서 시작인지 알 수 없고,
   여백만 벌리면 화면이 텅 빈다. 가는 선 하나로 구획을 만든다 */
body.home .sc-hero{ border-bottom:1px solid var(--line) }
body.home #tools{ padding-top:clamp(48px,7vh,80px) }
/* ══════════════════════════════════════════
   세계 이동 — 좌우 화살표와 페이지 전환
   ──────────────────────────────────────────
   화살표는 평범한 <a> 다. 자바스크립트 없이 동작하고
   검색엔진도 링크를 따라간다.

   넘어갈 때의 애니메이션은 브라우저 내장 기능(View Transitions)에 맡긴다.
   라이브러리가 필요 없고, 이 기능이 없는 브라우저에서는
   애니메이션만 빠지고 이동은 그대로 된다.
   ══════════════════════════════════════════ */
/* ⚠ 브라우저 내장 전환(@view-transition)은 쓰지 않는다.
     규칙이 파싱되고 감소모션도 꺼져 있는데 전환이 시작되지 않는 경우가 있었다
     (pageswap 의 viewTransition 이 비어 있었다). 되면 되고 아니면 아무 일도
     안 일어나는 상태라, assets/worldmove.js 가 직접 처리한다.
     둘을 같이 켜면 두 번 움직이므로 여기서는 켜지 않는다. */

/* ⚠ 문서 전체(html)를 움직이면 안 된다.
     헤더는 sticky, 화살표는 fixed 이고 두 세계에서 완전히 같은 모양이다.
     통째로 밀면 똑같은 헤더가 나갔다가 똑같은 헤더가 들어와서
     전환이 아니라 버벅임으로 보인다. 바뀌는 내용만 움직인다.

   ⚠ 이동량은 % 가 아니라 px 로 준다. % 는 각 요소 '자기 폭' 기준이라
     본문(1180px)과 도구 영역(폭 다름)이 서로 다른 거리만큼 밀려 어긋난다. */
html.world-out-next body > *:not(.site-header):not(.world-nav),
html.world-out-prev body > *:not(.site-header):not(.world-nav),
html.world-in-next  body > *:not(.site-header):not(.world-nav),
html.world-in-prev  body > *:not(.site-header):not(.world-nav){
  will-change:transform, opacity;
}
html.world-out-next body > *:not(.site-header):not(.world-nav){ animation:wmOutNext .13s ease-in both }
html.world-out-prev body > *:not(.site-header):not(.world-nav){ animation:wmOutPrev .13s ease-in both }
html.world-in-next  body > *:not(.site-header):not(.world-nav){ animation:wmInNext .26s cubic-bezier(.22,.61,.36,1) both }
html.world-in-prev  body > *:not(.site-header):not(.world-nav){ animation:wmInPrev .26s cubic-bezier(.22,.61,.36,1) both }

@keyframes wmOutNext{ to  { transform:translateX(-22px); opacity:.5 } }
@keyframes wmOutPrev{ to  { transform:translateX(22px);  opacity:.5 } }
@keyframes wmInNext { from{ transform:translateX(26px);  opacity:0 } }
@keyframes wmInPrev { from{ transform:translateX(-26px); opacity:0 } }

.world-nav{ position:fixed; inset:0; pointer-events:none; z-index:40 }

.world-arrow{
  position:absolute; top:50%; translate:0 -50%;
  pointer-events:auto;
  display:flex; align-items:center; gap:10px;
  padding:0; text-decoration:none; color:var(--ink);
  transition:transform .28s var(--ease);
}
.world-arrow.prev{ left:clamp(10px,2vw,28px) }
.world-arrow.next{ right:clamp(10px,2vw,28px); flex-direction:row-reverse }

.world-arrow svg{
  flex:none; width:46px; height:46px; padding:13px;
  border:1px solid var(--line-2); border-radius:50%;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
          backdrop-filter:blur(20px) saturate(140%);
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.06);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.world-arrow:hover{ transform:translateX(0) scale(1.06) }
.world-arrow.prev:hover{ transform:translate(-2px,0) scale(1.06) }
.world-arrow.next:hover{ transform:translate(2px,0) scale(1.06) }
.world-arrow:hover svg{
  border-color:var(--ink-3);
  box-shadow:0 2px 6px rgba(0,0,0,.06), 0 14px 34px rgba(0,0,0,.1);
}
.world-arrow:focus-visible svg{ outline:2px solid var(--accent); outline-offset:3px }

/* 이름표는 평소엔 숨고 마우스를 올릴 때만 나온다.
   늘 떠 있으면 목록을 읽는 데 방해가 된다 */
.world-arrow-label{
  font-size:13.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line);
  opacity:0; transform:translateX(-6px);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.world-arrow.next .world-arrow-label{ transform:translateX(6px) }
.world-arrow:hover .world-arrow-label,
.world-arrow:focus-visible .world-arrow-label{ opacity:1; transform:translateX(0) }

/* 좁은 화면에서는 이름표를 아예 빼고 화살표만 남긴다 */
@media (max-width:720px){
  .world-arrow-label{ display:none }
  .world-arrow svg{ width:40px; height:40px; padding:11px }
}

@media (prefers-reduced-motion:reduce){
  /* worldmove.js 도 이걸 보고 애니메이션 없이 바로 이동한다 */
  html.world-out-next body > *, html.world-out-prev body > *,
  html.world-in-next body > *, html.world-in-prev body > *{ animation:none }
  .world-arrow, .world-arrow svg, .world-arrow-label{ transition:none }
}
@media (prefers-reduced-transparency:reduce){
  .world-arrow svg, .world-arrow-label{
    background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

/* ══════════════════════════════════════════
   부동산 세계 — 지도가 첫 화면의 주인공
   왼쪽에 문장, 오른쪽에 지도. 좁아지면 세로로 쌓는다.
   ══════════════════════════════════════════ */
.map-hero{
  background:#fff;
  padding:clamp(40px,6vh,80px) clamp(20px,3.4vw,56px) clamp(32px,5vh,64px);
  border-bottom:1px solid var(--line);
}
.map-hero-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:center;
}
.map-hero-text h1{
  font-size:clamp(30px,3.6vw,52px); font-weight:500; line-height:1.28;
  letter-spacing:-.022em; color:var(--ink); margin:0 0 var(--s3);
}
.map-hero-text p{ margin:0 0 8px; color:var(--ink-2); font-size:clamp(14px,1.15vw,17px); line-height:1.75 }
.map-hero-hint{ color:var(--ink-3) !important; font-size:13.5px !important }

.map-stage .map-wrap{ max-width:440px; margin:0 auto }
.map-guide{
  margin:var(--s3) 0 0; text-align:center;
  font-size:12.5px; color:var(--ink-3); line-height:1.8;
}
.map-guide kbd{
  font-family:inherit; font-size:11.5px; padding:1px 5px;
  border:1px solid var(--line-2); border-radius:4px; background:var(--bg-2);
}

@media (max-width:820px){
  .map-hero-inner{ grid-template-columns:minmax(0,1fr); gap:var(--s4) }
  .map-hero-text{ text-align:center }
  .map-stage .map-wrap{ max-width:340px }
}

/* 집 살 때 확인하는 사이트 — 도구 목록 아래에 붙는 외부 링크 묶음.
   제목은 위 도구 섹션들과 같은 .sec-head 를 쓰되,
   .tool-section 은 아니다 — catalog.js 가 카드 없는 섹션으로 보고 숨겨 버린다 */
body.home .hub-section{ margin-top:var(--s6) }
body.home .hub-section .hub-body{ margin-top:var(--s4) }
body.home .hub-section .hub-body h2{
  font-size:17px; font-weight:700; letter-spacing:-.015em;
  margin:var(--s4) 0 var(--s3); color:var(--ink);
}
body.home .hub-section .hub-body h2:first-child{ margin-top:0 }

/* ══════════════════════════════════════════
   주식 · 코인 세계 — 시세 카드 느낌의 첫 화면
   토스증권·업비트가 읽기 쉬운 이유를 가져온다.
     · 큰 숫자 하나가 주인공
     · 등락은 색으로만 (한국식 — 상승 빨강, 하락 파랑)
     · 입력은 최소, 손가락으로 끌어 조절
   브랜드를 베끼지 않고 그 원리만 쓴다.
   ══════════════════════════════════════════ */
.quote-hero{
  background:#fff;
  padding:clamp(40px,6vh,80px) clamp(20px,3.4vw,56px) clamp(28px,4vh,52px);
  border-bottom:1px solid var(--line);
}
.quote-hero-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(24px,4vw,64px); align-items:center;
}
.quote-hero-text h1{
  font-size:clamp(30px,3.6vw,52px); font-weight:500; line-height:1.28;
  letter-spacing:-.022em; color:var(--ink); margin:0 0 var(--s3);
}
.quote-hero-text p{ margin:0; color:var(--ink-2); font-size:clamp(14px,1.15vw,17px); line-height:1.75 }

/* 시세 카드 */
.quote-card{
  border:1px solid var(--line); border-radius:18px; background:#fff;
  padding:var(--s4) var(--s4) var(--s3);
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 12px 32px rgba(0,0,0,.06);
}
.quote-label{ font-size:13px; color:var(--ink-2); font-weight:600 }
.quote-input{
  display:flex; align-items:baseline; gap:2px; margin:var(--s2) 0 var(--s3);
}
.quote-sign{ font-size:34px; font-weight:600; color:var(--down) }
.quote-input input{
  width:auto; min-width:0; flex:0 1 auto;
  border:0; padding:0; background:transparent;
  font-family:inherit; font-size:44px; font-weight:600; letter-spacing:-.03em;
  color:var(--down); font-variant-numeric:tabular-nums;
  field-sizing:content;                     /* 지원하면 값 길이에 맞춰 줄어든다 */
  max-width:3.4em;
}
.quote-input input:focus{ outline:none }
.quote-input input::-webkit-outer-spin-button,
.quote-input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.quote-input input[type=number]{ -moz-appearance:textfield }
.quote-unit{ font-size:26px; font-weight:600; color:var(--down) }

.quote-range{ width:100%; margin:0 0 var(--s3); accent-color:var(--ink) }

.quote-out{
  border-top:1px solid var(--line); padding-top:var(--s3);
  display:flex; flex-direction:column; gap:4px;
}
.quote-out-label{ font-size:13px; color:var(--ink-2) }
.quote-big{
  font-size:clamp(30px,3vw,40px); font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.quote-rows{ margin-top:var(--s3); border-top:1px solid var(--line); padding-top:var(--s2) }
.qrow{
  display:flex; justify-content:space-between; gap:var(--s3);
  padding:5px 0; font-size:13.5px; color:var(--ink-2);
}
.qrow span:last-child{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums }

.quote-guide{
  max-width:1180px; margin:var(--s4) auto 0; text-align:center;
  font-size:12.5px; color:var(--ink-3);
}

@media (max-width:820px){
  .quote-hero-inner{ grid-template-columns:minmax(0,1fr); gap:var(--s4) }
  .quote-hero-text{ text-align:center }
}

/* ══════════════════════════════════════════
   코인 보드 — 업비트 화면 구조
     왼쪽  캔들 차트 (한 번에 한 종목)
     오른쪽 촘촘한 종목 표

   바탕은 흰색으로 통일하고 구획은 선 하나로만 나눈다.
   회색 판을 깔았더니 사이트의 다른 화면과 따로 놀았다.
   ══════════════════════════════════════════ */
.board-hero{
  background:#fff;
  padding:clamp(20px,3vh,32px) clamp(16px,3vw,56px) clamp(24px,3.5vh,40px);
  border-bottom:1px solid var(--line);
}
.board-inner{ max-width:1180px; margin:0 auto }
.board-main{
  display:grid; grid-template-columns:minmax(0,1fr) 292px;
  gap:0; align-items:stretch;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}

/* ── 왼쪽: 차트 ─────────────────────────── */
.board-chart{
  padding:16px 16px 10px; display:flex; flex-direction:column;
  border-right:1px solid var(--line);
}
.board-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.board-name{ display:flex; align-items:baseline; gap:7px; margin-bottom:3px }
.board-name b{ font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--ink) }
.board-name span{ font-size:12px; color:var(--ink-3) }
.board-px{
  font-size:clamp(26px,3vw,34px); font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.15; color:var(--ink);
}
.board-chg{ margin-top:2px; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-2) }

/* 기간 — 9개라 좁은 화면에서 줄바꿈되게 둔다 */
.board-chart .seg{
  align-self:flex-start; margin-bottom:10px; flex-wrap:wrap;
  border-color:var(--line);
}
.board-chart .seg button{ padding:4px 9px; font-size:12px }

.chart-box{ position:relative; flex:1 }
#board{ width:100%; height:auto; display:block; cursor:crosshair }
#board .grid{ stroke:var(--line); stroke-width:1 }
#board .axis{ fill:var(--ink-3); font-size:10px; font-family:inherit }
#board .axis.mid{ text-anchor:middle }
#board .wick{ stroke-width:1 }
#board .body{ stroke-width:1 }
#board .c-up{ stroke:var(--up); fill:var(--up) }
#board .c-down{ stroke:var(--down); fill:var(--down) }
#board .nowline{ stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3 }
#board .nowtag{ fill:var(--ink) }
#board .nowtxt{ fill:#fff; font-size:10px; font-family:inherit; font-weight:600 }
#board .cx{ stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; pointer-events:none }

/* 마우스를 올린 지점의 값 */
.tip{
  position:absolute; z-index:3; pointer-events:none;
  min-width:136px; padding:8px 10px; border-radius:8px;
  background:var(--ink); color:#fff; font-size:11.5px; line-height:1.7;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.tip b{ display:block; margin-bottom:4px; font-size:11px; color:rgba(255,255,255,.72); font-weight:600 }
.tip span{ display:flex; justify-content:space-between; gap:12px; font-variant-numeric:tabular-nums }
.tip i{ font-style:normal; color:rgba(255,255,255,.6) }
.tip .up{ color:#ff8b7a }
.tip .down{ color:#8ec2ff }
.tip .tip-cursor{ margin-top:4px; padding-top:4px; border-top:1px solid rgba(255,255,255,.18) }

.chart-empty{
  position:absolute; inset:0; display:grid; place-items:center;
  margin:0; font-size:13px; color:var(--ink-3);
}

/* ── 오른쪽: 종목 표 ────────────────────── */
.board-list{ display:flex; flex-direction:column; overflow:hidden }
.bl-head, .bl-row{
  display:grid; grid-template-columns:3px minmax(0,1fr) 84px 58px;
  align-items:center; gap:8px; padding:7px 12px;
}
.bl-head{ font-size:11px; color:var(--ink-3); border-bottom:1px solid var(--line) }
.bl-head span:nth-child(1){ grid-column:1 / 3 }
.bl-head span:nth-child(2),
.bl-head span:nth-child(3){ text-align:right }

.bl-body{ overflow-y:auto; max-height:392px }
.bl-row{
  width:100%; border:0; background:transparent; cursor:pointer; text-align:left;
  font-family:inherit; border-bottom:1px solid var(--line);
  transition:background .12s linear;
}
.bl-row:last-child{ border-bottom:0 }
.bl-row:hover{ background:var(--bg-2) }
.bl-row.on{ background:#f0f5fb }
.bl-row.on .bl-mark{ background:var(--ink) }
.bl-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }

.bl-mark{ width:3px; height:22px; border-radius:2px; background:transparent }
.bl-name{ display:flex; flex-direction:column; min-width:0 }
.bl-name b{ font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bl-name i{ font-style:normal; font-size:10.5px; color:var(--ink-3) }
.bl-px, .bl-chg{
  text-align:right; font-size:12.5px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.bl-chg{ font-size:12px }
.bl-note{ margin:0; padding:8px 12px; font-size:11px; color:var(--ink-3); border-top:1px solid var(--line) }

.board-guide{ margin:12px 0 0; font-size:12px; color:var(--ink-3); line-height:1.8 }
.board-guide a{ color:var(--accent) }

@media (max-width:900px){
  .board-main{ grid-template-columns:minmax(0,1fr) }
  .board-chart{ border-right:0; border-bottom:1px solid var(--line) }
  .bl-body{ max-height:260px }
}

/* ══════════════════════════════════════════
   업종 보드 (career.html)
   업종을 고르면 자격증 · 기업 · 연봉 확인처가 나온다.

   ⚠ 연봉 금액이나 순위는 싣지 않는다.
      실존 기업 급여를 지어내면 사용자가 그 숫자로 이직을 결정한다.
      회사가 직접 공시한 DART 로 보낸다.
   ══════════════════════════════════════════ */
.fb-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3);
}
.fb-head h2{
  font-size:clamp(20px,2.2vw,28px); font-weight:600; letter-spacing:-.022em;
  margin:0 0 6px; color:var(--ink);
}
.fb-head p{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.7 }
.fb-cal{
  flex:none; font-size:13px; font-weight:700; color:var(--ink);
  border:1px solid var(--line-2); border-radius:999px; padding:7px 14px;
  text-decoration:none; background:#fff;
  transition:border-color .2s var(--ease);
}
.fb-cal:hover{ border-color:var(--ink) }

#fieldBoard .chips{ margin-bottom:var(--s4) }

.fb-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff;
}
.fb-col{ padding:16px 18px }
.fb-col + .fb-col{ border-left:1px solid var(--line) }
.fb-col h3{
  margin:0 0 var(--s3); font-size:13px; font-weight:700; color:var(--ink-2);
  letter-spacing:-.01em;
}

.fb-cert{ list-style:none; margin:0; padding:0 }
.fb-cert li{ padding:8px 0; border-bottom:1px solid var(--line) }
.fb-cert li:last-child{ border-bottom:0 }
.fb-cert b{ display:block; font-size:13.5px; font-weight:700; color:var(--ink) }
.fb-cert span{ display:block; margin-top:2px; font-size:12px; color:var(--ink-3); line-height:1.6 }

.fb-co{ list-style:none; margin:0; padding:0 }
.fb-co li{ border-bottom:1px solid var(--line) }
.fb-co li:last-child{ border-bottom:0 }
.fb-co a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 0; font-size:13.5px; font-weight:600; color:var(--ink);
  text-decoration:none;
}
.fb-co a:hover{ color:var(--accent) }
.fb-co i{ font-style:normal; font-size:11.5px; font-weight:500; color:var(--ink-3) }
.fb-co a:hover i{ color:var(--accent) }

.fb-more{
  display:inline-block; margin-top:var(--s3); font-size:12.5px; font-weight:600;
  color:var(--accent); text-decoration:none;
}
.fb-tip{
  margin:var(--s3) 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.7;
  padding-top:var(--s2); border-top:1px solid var(--line);
}

@media (max-width:820px){
  .fb-grid{ grid-template-columns:minmax(0,1fr) }
  .fb-col + .fb-col{ border-left:0; border-top:1px solid var(--line) }
}

/* ══════════════════════════════════════════
   부수입 만들기 (career.html)
   본문 맨 끝에 글로만 두었더니 아무도 못 찾았다.
   도구 목록 위로 올리고 카드로 보이게 한다.
   ══════════════════════════════════════════ */
.side-hero{
  background:#fff;
  padding:clamp(28px,4vh,48px) clamp(16px,3vw,56px) clamp(28px,4vh,48px);
  border-bottom:1px solid var(--line);
}
.sh-head{ margin-bottom:var(--s4) }
.sh-head h2{
  font-size:clamp(20px,2.2vw,28px); font-weight:600; letter-spacing:-.022em;
  margin:0 0 6px; color:var(--ink);
}
.sh-head p{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.7 }

.sh-types{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.sh-type{ padding:18px; position:relative }
.sh-type + .sh-type{ border-left:1px solid var(--line) }
.sh-tag{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:12px; font-weight:700; margin-bottom:8px;
}
.sh-type h3{ margin:0 0 3px; font-size:16px; font-weight:700; letter-spacing:-.015em; color:var(--ink) }
.sh-ex{ margin:0 0 var(--s3); font-size:12px; color:var(--ink-3); line-height:1.6 }
.sh-type ul{ list-style:none; margin:0; padding:0 }
.sh-type li{
  position:relative; padding-left:17px; margin-bottom:5px;
  font-size:12.5px; line-height:1.65; color:var(--ink-2);
}
.sh-type li::before{ position:absolute; left:0; font-weight:700 }
.sh-type li.ok::before{ content:'＋'; color:#1f9d55 }
.sh-type li.no::before{ content:'−'; color:var(--stamp) }

.sh-order{
  margin:var(--s3) 0 0; padding:12px 14px;
  background:var(--bg-2); border-radius:var(--r);
  font-size:13px; color:var(--ink-2); line-height:1.75;
}
.sh-order a{ color:var(--accent) }

.sh-check{ margin-top:var(--s5) }
.sh-check h3{
  margin:0 0 var(--s3); font-size:15px; font-weight:700;
  letter-spacing:-.015em; color:var(--ink);
}
.sh-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) }
.sh-item{
  border:1px solid var(--line); border-left:3px solid var(--ink);
  border-radius:var(--r); padding:12px 14px;
}
.sh-item > b{
  /* 자식 선택자여야 한다. .sh-item b 로 두면 문단 안의 <b> 까지 block 이 되어
     "본업에 지장을 주거나…" 같은 강조가 제멋대로 줄바꿈된다 */
  display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:4px;
}
.sh-item p{ margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.75 }
.sh-item a{ color:var(--accent) }

@media (max-width:820px){
  .sh-types{ grid-template-columns:minmax(0,1fr) }
  .sh-type + .sh-type{ border-left:0; border-top:1px solid var(--line) }
  .sh-grid{ grid-template-columns:minmax(0,1fr) }
}