/* ============================================================
   ROBERIN 앱셸 시안 — 공용 셸 스타일 (툴 페이지·홈 공용)
   토큰은 The New(더뉴) 정본 값. 다크는 global-shell 값에서 파생.
   ============================================================ */
:root{
  --ink:#1a1208; --muted:#5a4a30; --line:#b8a888; --soft:#ddd4be;
  --paper:#faf6ee; --wash:#f5efdf; --btn:#ede6d4; --btn-hover:#dfd4bb;
  --accent:#c44a00; --card:#fdfaf3; --dot:rgba(26,18,8,.055);
  --accent-wash:rgba(196,74,0,.07);
  --serif:ui-serif, Georgia, "Times New Roman", "Noto Serif KR", "Apple SD Gothic Neo", serif;
  --mono:"Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:-apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", system-ui, sans-serif;
  --sb-w:236px; --sb-rail:52px; --hd-h:52px; --aside-w:332px; --main-max:900px;
  --fill:#1a1208; --on-fill:#faf6ee; --fill-hover:#5a4a30;
  --radius:2px; --ease:120ms ease;
  color-scheme:light;
}
html[data-theme="dark"]{
  --ink:#f7ead1; --muted:#cdbb9c; --line:#5f4a32; --soft:#3b2d1d;
  --paper:#201811; --wash:#271d13; --btn:#332717; --btn-hover:#42321d;
  --accent:#ea7a40; --card:#251b12; --dot:rgba(247,234,209,.07);
  --accent-wash:rgba(234,122,64,.12);
  --fill:#cdb792; --on-fill:#1a1208; --fill-hover:#dcc8a6;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --ink:#f7ead1; --muted:#cdbb9c; --line:#5f4a32; --soft:#3b2d1d;
    --paper:#201811; --wash:#271d13; --btn:#332717; --btn-hover:#42321d;
    --accent:#ea7a40; --card:#251b12; --dot:rgba(247,234,209,.07);
    --accent-wash:rgba(234,122,64,.12);
    --fill:#cdb792; --on-fill:#1a1208; --fill-hover:#dcc8a6;
    color-scheme:dark;
  }
}

/* ---------- 기본 ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-padding-top:calc(var(--hd-h) + 8px)}
body{
  font-family:var(--serif); font-size:15px; line-height:1.6; color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(var(--dot) .6px, transparent .8px);
  background-size:14px 14px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono)}
.num{font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}

/* ---------- 셸: 왼쪽 사이드바 | (헤더 / 콘텐츠 / 푸터) ---------- */
.rb-shell{display:grid;grid-template-columns:var(--sb-w) minmax(0,1fr);min-height:100dvh;transition:grid-template-columns var(--ease)}
html[data-sidebar="collapsed"] .rb-shell{grid-template-columns:var(--sb-rail) minmax(0,1fr)}

.rb-sb{
  position:sticky;top:0;height:100dvh;overflow:hidden auto;overscroll-behavior:contain;
  background:var(--wash);border-right:1px solid var(--soft);
  display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:var(--soft) transparent;
}
.rb-sb__brand{display:flex;align-items:center;gap:10px;height:var(--hd-h);padding:0 14px;flex:none;border-bottom:1px solid var(--soft)}
/* 로고: 엠블럼 28px + 워드마크 18px, 사이 간격 11px (원본 PNG는 붙어 있고 글자가 작아 분리·확대). 테마별 이미지 전환 */
.rb-sb__brand{gap:11px;padding-left:14px}
.rb-logo{display:block;flex:none;height:auto}
.rb-logo--emb{width:28px;height:28px;margin-top:1px}
.rb-logo--word{width:auto;height:18px;margin-top:1px}
.rb-logo--dark{display:none}
html[data-theme="dark"] .rb-logo--light{display:none}
html[data-theme="dark"] .rb-logo--dark{display:block}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .rb-logo--light{display:none}
  html:not([data-theme="light"]) .rb-logo--dark{display:block}
}
.rb-sb__search{padding:12px 12px 6px;flex:none}
.rb-field{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;
  background:var(--paper);border:1px solid var(--soft);border-radius:var(--radius);color:var(--muted);
  transition:border-color var(--ease);
}
.rb-field:focus-within{border-color:var(--line);color:var(--ink)}
.rb-field input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:13.5px;line-height:1;color:var(--ink);outline:0;padding:2px 0 0}
.rb-field input::placeholder{color:var(--muted);opacity:.7}
.rb-field kbd{font-family:var(--mono);font-size:10px;color:var(--muted);border:1px solid var(--soft);border-radius:var(--radius);padding:3px 4px 0;line-height:1.2}

.rb-nav{padding:8px 8px 12px}
.rb-nav__label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 8px 4px}
.rb-nav__label--row{display:flex;align-items:baseline;justify-content:space-between;gap:4px 8px;flex-wrap:wrap}
.rb-nav__acts{display:inline-flex;align-items:baseline;gap:4px;letter-spacing:0;text-transform:none;font-family:var(--sans);font-size:10.5px;margin-left:auto}
/* 낱말 안에서 줄이 꺾이지 않게(en "Expand all"). 폭이 모자라면 버튼 묶음이 통째로 다음 줄로 내려간다 */
.rb-nav__acts button{color:var(--muted);padding:2px 3px;border-radius:var(--radius);white-space:nowrap}
.rb-nav__acts button:hover{color:var(--ink);background:var(--btn)}
.rb-nav__acts i{font-style:normal;opacity:.5}
.rb-group{margin:0 0 2px}
.rb-group__head{
  display:flex;align-items:center;gap:9px;width:100%;height:34px;padding:0 8px;list-style:none;
  border-radius:var(--radius);color:var(--ink);font-size:13.5px;font-weight:650;text-align:left;cursor:pointer;
  transition:background var(--ease);
}
.rb-group__head::-webkit-details-marker{display:none}
.rb-group__head:hover{background:var(--btn)}
.rb-group__head .i{color:var(--muted)}
/* 분류 이름은 한 줄(es "Dinero, impuestos y salario"가 34px 머리에서 두 줄로 꺾였음, 2026-10-06). 전체 이름은 title로 */
.rb-group__head > span:not(.cnt){flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-group__head .cnt{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:400;margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:0;flex:none}
.rb-group__head .chev{transition:transform var(--ease);color:var(--muted)}
.rb-group--fav .rb-group__head .chev{margin-left:auto}
.rb-group[open] .rb-group__head .chev{transform:rotate(90deg)}
.rb-group--fav .rb-group__head .i{color:var(--accent)}
.rb-group__list{list-style:none;margin:0 0 4px;padding:2px 0 2px 20px;position:relative}
.rb-group__list::before{content:"";position:absolute;left:15px;top:4px;bottom:6px;width:1px;background:var(--soft)}
.rb-group__list li{position:relative}
.rb-group__list a{
  /* block + line-height: flex였을 때는 text-overflow가 먹지 않아 긴 이름이 ★(오른쪽 30px) 밑으로 깔렸다(2026-10-06 수정) */
  display:block;height:30px;line-height:30px;padding:0 30px 0 10px;margin-left:6px;
  font-size:13px;color:var(--muted);border-radius:var(--radius);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--ease),color var(--ease);
}
.rb-group__list a:hover{background:var(--btn);color:var(--ink)}
.rb-group__list a[aria-current="page"]{color:var(--ink);font-weight:700;background:var(--accent-wash)}
.rb-group__list a[aria-current="page"]::before{content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:2px;background:var(--accent)}
.rb-group__list a.more{color:var(--accent);font-family:var(--mono);font-size:11px;padding-right:10px}
.rb-group__empty{margin:0;font-family:var(--mono);font-size:10.5px;color:var(--muted);opacity:.8;padding:2px 10px 6px 36px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 즐겨찾기 별: 항목 hover 때 나타나고, 지정된 항목은 항상 보인다 */
.rb-fav{
  position:absolute;right:3px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;
  color:var(--muted);opacity:0;border-radius:var(--radius);transition:opacity var(--ease),color var(--ease),background var(--ease);
}
.rb-fav .i{width:14px;height:14px}
.rb-group__list li:hover .rb-fav,.rb-fav:focus-visible,.rb-fav[aria-pressed="true"]{opacity:1}
.rb-fav:hover{background:var(--btn);color:var(--ink)}
.rb-fav[aria-pressed="true"]{color:var(--accent)}
.rb-fav[aria-pressed="true"] .i{fill:currentColor}
.rb-sb__foot{position:sticky;bottom:0;z-index:1;background:var(--wash);flex:none;border-top:0;padding:10px 12px;display:flex;gap:4px;flex-wrap:wrap}
.rb-sb__foot a{font-family:var(--mono);font-size:11px;color:var(--muted);padding:4px 6px;border-radius:var(--radius)}
.rb-sb__foot a:hover{background:var(--btn);color:var(--ink)}

/* 사이드바 접힘(아이콘 레일) */
html[data-sidebar="collapsed"] .rb-logo--word{display:none}
html[data-sidebar="collapsed"] .rb-sb__search,
html[data-sidebar="collapsed"] .rb-nav__label,
html[data-sidebar="collapsed"] .rb-group__head span,
html[data-sidebar="collapsed"] .rb-group__head .chev,
html[data-sidebar="collapsed"] .rb-group__list,
html[data-sidebar="collapsed"] .rb-group__empty,
html[data-sidebar="collapsed"] .rb-sb__foot{display:none}
html[data-sidebar="collapsed"] .rb-sb__brand{justify-content:center;padding:0}
html[data-sidebar="collapsed"] .rb-nav{padding:8px 6px}
html[data-sidebar="collapsed"] .rb-group__head{justify-content:center;padding:0;height:38px}
html[data-sidebar="collapsed"] .rb-group__head .i{color:var(--ink)}
html[data-sidebar="collapsed"] .rb-group--fav .rb-group__head .i{color:var(--accent)}

/* ---------- 헤더 ---------- */
.rb-hd{
  position:sticky;top:0;z-index:20;height:var(--hd-h);
  display:flex;align-items:center;gap:8px;padding:0 20px 0 12px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--soft);
}
.rb-ib{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius);color:var(--muted);transition:background var(--ease),color var(--ease)}
.rb-ib:hover{background:var(--btn);color:var(--ink)}
/* 헤더 텍스트는 한글 글리프가 행 박스 안에서 약 2px 위로 치우쳐 아이콘보다 높아 보인다 → 광학 보정 2px */
.rb-crumb{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;line-height:1.35;color:var(--muted);margin-left:4px;min-width:0;padding-top:4px}
.rb-crumb a{white-space:nowrap;flex:none}
.rb-crumb a:hover{color:var(--ink)}
.rb-crumb .sep{opacity:.5}
.rb-crumb strong{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-hd__sp{flex:1}
.rb-hd__links{display:flex;gap:2px}
.rb-hd__links a{display:inline-flex;align-items:center;height:32px;font-size:13px;font-weight:650;line-height:1;padding:2px 9px 0;border-radius:var(--radius);color:var(--muted);transition:background var(--ease),color var(--ease)}
.rb-hd__links a:hover{background:var(--btn);color:var(--ink)}
.rb-lang{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 8px 0 10px;border:1px solid var(--soft);border-radius:var(--radius);font-family:var(--mono);font-size:11.5px;line-height:1;color:var(--ink);transition:background var(--ease)}
.rb-lang:hover{background:var(--btn)}
.rb-hd .rb-field{height:32px;width:200px}
.rb-hd .rb-field input{font-size:13px}
.rb-scrim{position:fixed;inset:0;background:rgba(26,18,8,.35);z-index:29;opacity:0;pointer-events:none;transition:opacity var(--ease)}

/* ---------- 콘텐츠: 본문(가운데 정렬) | 오른쪽 레일(가장자리 고정) ---------- */
.rb-content{display:grid;grid-template-columns:minmax(0,1fr) var(--aside-w);align-items:stretch}
.rb-main{min-width:0;width:100%;max-width:var(--main-max);margin:0 auto;padding:22px 36px 56px}
.rb-aside{min-width:0;padding:20px 16px 32px;border-left:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 55%, var(--paper))}
/* 레일 광고 배치 (2026-10-05 최적화)
   · 앞부분(.rb-aside__pre)은 흐름에 두고 최소 높이를 1 viewport로 잡아 첫 화면에 레일 광고가 들어오지 않게 한다(첫 화면 광고 ≤1)
   · 광고 블록(.rb-aside__ad)만 sticky: 스크롤로 들어와 본문·Article 구간(핵심 수익대) 내내 보이고 레일 끝에서 자연히 빠진다
   · AdSense sticky 요건: 폭 ≤300, 한 번에 하나, 겹침 없음, 데스크톱만 → ≤1180px에서는 요청 자체를 하지 않는다 */
.rb-aside__pre{display:grid;gap:20px;align-content:start;min-height:calc(100dvh - var(--hd-h) - 20px)}
.rb-aside__ad{position:sticky;top:calc(var(--hd-h) + 20px);margin-top:20px;padding-bottom:20px}
.rb-aside__ad .tn-ad{margin:0}

/* ---------- 푸터 ---------- */
.rb-ft{border-top:1px solid var(--soft);padding:16px 32px;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted)}
.rb-ft a:hover{color:var(--ink)}
.rb-ft .sp{flex:1}

/* ---------- 공용 본문 블록 ---------- */
/* hero: 2차 수정 — 세 줄(eyebrow/H1/설명)의 세로 간격을 넓힘 */
.tn-hero{padding:12px 0 24px;border-bottom:3px double var(--soft);margin-bottom:22px}
/* 선택자를 `.rb-main p.…`로 올려 아래 `.tn-hero p`·홈의 `.hm-hero > p`에 덮이지 않게 한다 */
.rb-main p.tn-hero__eyebrow{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;max-width:none}
.tn-hero h1{font-family:var(--serif);font-weight:950;font-size:clamp(26px,2.8vw,34px);line-height:1.12;letter-spacing:-.045em;margin:0 0 14px;color:var(--ink)}
.tn-hero p{margin:0;max-width:720px;font-size:14.5px;color:var(--muted);line-height:1.75}
.tn-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.tn-hero__meta b{color:var(--ink);font-weight:600}
/* hero 안의 즐겨찾기 토글 */
.rb-favbtn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px 0 7px;border:1px solid var(--soft);border-radius:var(--radius);font-family:var(--mono);font-size:11px;color:var(--muted);transition:background var(--ease),color var(--ease),border-color var(--ease)}
.rb-favbtn:hover{background:var(--btn);color:var(--ink)}
.rb-favbtn .i{width:13px;height:13px}
.rb-favbtn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.rb-favbtn[aria-pressed="true"] .i{fill:currentColor}

/* 광고 지면 — 시안에서는 실제 소재처럼 보이는 예시 creative(.adx)를 채운다. 운영 wrapper는 투명·라벨 0 (Ads Gate). 네트워크 요청 없음 */
.tn-ad{display:block;margin:0 auto;overflow:hidden;background:#fff;border:1px solid #e3ddd0;border-radius:2px;color:#1f1f1f;font-family:var(--sans);position:relative}
html[data-theme="dark"] .tn-ad{border-color:#4a3a28}
.tn-ad--h{width:728px;max-width:100%;height:90px}
.tn-ad--rect{width:300px;height:250px}
.tn-ad-wrap{margin:18px 0}
.tn-ad-wrap--top{margin:24px 0}           /* hero 구분선→광고 = 광고→툴 = 24px(2026-10-24 사용자: 옛 54/48은 구분선 없는 hero 기준). hero margin-bottom 22와 겹쳐(collapse) 24 */
.tn-ad-wrap--bottom{margin:28px 0 26px}   /* meta 뒤 28px(기준 18 이상; 1080px 화면에서 짧은 툴의 첫 화면 겹침 방지), design-note 앞 26px */
/* 예시 creative */
.adx{display:flex;align-items:center;gap:12px;height:100%;padding:0 12px 0 0;text-decoration:none;color:inherit}
.adx__img{flex:none;height:100%;aspect-ratio:1;background:linear-gradient(135deg,#dfe8f3,#b9c9de);display:grid;place-items:center;color:#5b7190}
.adx__img svg{width:46%;height:46%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.adx__txt{flex:1;min-width:0;display:grid;gap:2px}
.adx__h{font-size:14px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1a1a1a}
.adx__d{font-size:12px;line-height:1.3;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adx__u{font-size:11px;color:#1a73e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adx__cta{flex:none;height:30px;padding:0 12px;border-radius:3px;background:#1a73e8;color:#fff;font-size:12px;font-weight:600;display:inline-flex;align-items:center}
.adx__tag{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:3px;height:15px;padding:0 5px;background:rgba(255,255,255,.92);border-left:1px solid #e3ddd0;border-bottom:1px solid #e3ddd0;font-size:9.5px;color:#5f6368;border-bottom-left-radius:2px}
.adx__tag i{font-style:normal;width:10px;height:10px;border:1px solid #9aa0a6;border-radius:50%;font-size:7px;line-height:8px;text-align:center}
/* 세로형(300×250) */
.tn-ad--rect .adx{flex-direction:column;align-items:stretch;gap:0;padding:0}
.tn-ad--rect .adx__img{height:138px;aspect-ratio:auto;width:100%}
.tn-ad--rect .adx__txt{padding:10px 12px 0}
.tn-ad--rect .adx__h{white-space:normal;font-size:15px}
.tn-ad--rect .adx__d{white-space:normal}
.tn-ad--rect .adx__cta{margin:8px 12px 0;align-self:flex-start}
/* 가로 광고 크기: wrapper의 실제 가용 폭에 따라 728×90 → 468×60 → 320×50. 소재를 줄이거나 자르지 않고 요청 크기 자체를 바꾼다 */
.tn-ad-wrap{container-type:inline-size}
@container (max-width:727px){.tn-ad--h{width:468px;height:60px}.tn-ad--h .adx__d{display:none}.tn-ad--h .adx__cta{height:26px;padding:0 10px;font-size:11.5px}.tn-ad--h .adx__h{font-size:13px}}
@container (max-width:467px){.tn-ad--h{width:320px;height:50px}.tn-ad--h .adx{gap:8px;padding-right:8px}.tn-ad--h .adx__u{display:none}.tn-ad--h .adx__h{font-size:12.5px}.tn-ad--h .adx__cta{height:24px;padding:0 9px;font-size:11px}}
@container (max-width:319px){.tn-ad--h{display:none}}
.tn-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin:12px 0 0;font-family:var(--mono);font-size:11px;color:var(--muted)}
.tn-design-note{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:18px 28px;align-items:center;padding:18px 0;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft);margin:22px 0}
.tn-design-note strong{font-family:var(--serif);font-weight:900;font-size:18px;line-height:1.2;letter-spacing:-.03em;display:block}
.tn-design-note strong span{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tn-design-note ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tn-design-note li{font-size:12.5px;color:var(--muted);line-height:1.5}
.tn-design-note li b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.tn-article{max-width:720px}
.tn-article h2{font-family:var(--serif);font-size:20px;font-weight:900;letter-spacing:-.03em;margin:28px 0 10px}
.tn-article h3{font-size:15px;font-weight:800;margin:20px 0 6px}
.tn-article p,.tn-article li{font-size:14.5px;line-height:1.75;color:var(--ink)}
.tn-article ol,.tn-article ul{padding-left:20px}
.tn-article table{width:100%;border-collapse:collapse;font-size:13.5px;margin:8px 0 4px}
.tn-article th,.tn-article td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--soft);vertical-align:top}
.tn-article th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tn-article td.n{font-family:var(--sans);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tn-faq details{border-top:1px solid var(--soft);padding:10px 0}
.tn-faq details:last-child{border-bottom:1px solid var(--soft)}
.tn-faq summary{cursor:pointer;font-weight:750;font-size:14.5px;list-style:none;display:flex;align-items:center;gap:8px}
.tn-faq summary::-webkit-details-marker{display:none}
.tn-faq summary .i{color:var(--muted);transition:transform var(--ease)}
.tn-faq details[open] summary .i{transform:rotate(90deg)}
.tn-faq details p{margin:8px 0 0 24px;color:var(--muted);font-size:14px}

/* 레일 카드 — v2 방향: 머리는 sans 라벨 + wash 톤, 항목은 serif 이름 + sans 태그, 선은 경계에만 */
.rb-card{border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);overflow:hidden}
.rb-card__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;background:var(--wash);border-bottom:1px solid var(--soft);font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.rb-card__head .i{width:12px;height:12px}
.rb-card ul{list-style:none;margin:0;padding:4px 0}
.rb-card li a{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink);transition:background var(--ease)}
.rb-card li a:hover{background:var(--btn)}
.rb-card li a .i{margin-left:auto;color:var(--muted);width:14px;height:14px;flex:none}
.rb-card li a small{font-family:var(--sans);font-size:10.5px;font-weight:500;color:var(--muted);flex:none}
.rb-card li a time{font-family:var(--sans);font-size:11px;color:var(--muted);margin-left:auto;flex:none;font-variant-numeric:tabular-nums}
.rb-card li a time + .i{margin-left:0}
.rb-card__body{padding:10px 14px 12px;font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.65}
.rb-card__body b{color:var(--ink);font-weight:650}
.rb-steps{margin:0;padding:10px 14px 12px;counter-reset:s;list-style:none;display:grid;gap:8px}
.rb-steps li{display:flex;gap:10px;font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.55}
.rb-steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;color:var(--accent);font-weight:700;padding-top:2px;flex:none}
.rb-steps li b{color:var(--ink);font-weight:650}
/* 레일 목차(이 툴의 차례) */
.rb-toc{list-style:none;margin:0;padding:4px 0}
.rb-toc li a{display:block;padding:6px 14px;font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.4;transition:background var(--ease),color var(--ease)}
.rb-toc li a:hover{background:var(--btn);color:var(--ink)}
.rb-toc li a.is-active{color:var(--ink);font-weight:650;box-shadow:inset 2px 0 0 var(--accent)}

/* ---------- 반응형 ---------- */
/* 넓은 모니터: 본문 상한을 한 단계만 올린다(100%로 늘리지 않음). 본문 글(720px)·Article은 그대로 */
@media (min-width:1680px){:root{--main-max:980px}}
@media (max-width:1400px){.rb-main{padding-left:32px;padding-right:32px}}
@media (max-width:1180px){
  .rb-content{grid-template-columns:minmax(0,1fr)}
  .rb-main{padding-bottom:28px}
  .rb-aside{border-left:0;border-top:1px solid var(--soft);background:none;width:100%;max-width:var(--main-max);margin:0 auto;padding:24px 36px 48px}
  .rb-aside__pre{min-height:0;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
  .rb-aside__ad{display:none}
}
@media (max-width:960px){
  .rb-shell{grid-template-columns:minmax(0,1fr) !important}
  .rb-sb{position:fixed;left:0;top:0;z-index:30;width:var(--sb-w);transform:translateX(-100%);transition:transform 160ms ease}
  html[data-sidebar="open"] .rb-sb{transform:none}
  html[data-sidebar="open"] .rb-scrim{opacity:1;pointer-events:auto}
  .rb-fav{opacity:1}
  .rb-hd{padding:0 12px}
  .rb-hd .rb-field{display:none}
  .rb-hd__links{display:none}
  .rb-main{padding:16px 16px 28px}
  .rb-aside{padding:20px 16px 40px}
  .rb-ft{padding:14px 16px}
}
@media (max-width:720px){
  .tn-design-note{grid-template-columns:minmax(0,1fr)}
  .tn-design-note ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .rb-main{padding:12px 5px 24px}
  .rb-aside{padding:16px 5px 36px}
  .rb-hd{padding:0 6px}
  .rb-crumb a:not(:last-of-type),.rb-crumb .sep:first-of-type{display:none}
}

/* ---------- 검색 팔레트 ---------- */
.rb-pal{position:fixed;inset:0;z-index:40;display:none}
.rb-pal[open]{display:block}
.rb-pal__scrim{position:absolute;inset:0;background:rgba(26,18,8,.42)}
html[data-theme="dark"] .rb-pal__scrim{background:rgba(0,0,0,.55)}
.rb-pal__panel{position:relative;width:min(640px,calc(100% - 24px));margin:min(12vh,110px) auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rb-pal__input{display:flex;align-items:center;gap:10px;height:54px;padding:0 10px 0 16px;border-bottom:1px solid var(--soft);color:var(--muted)}
.rb-pal__input input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:16px;line-height:1;padding-top:2px;color:var(--ink)}
.rb-pal__input input::placeholder{color:var(--muted);opacity:.7}
.rb-pal__input input::-webkit-search-cancel-button{-webkit-appearance:none}
.rb-pal__input .n{font-family:var(--mono);font-size:11px;color:var(--accent);white-space:nowrap}
.rb-pal__esc{font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--soft);border-radius:var(--radius);padding:3px 6px 1px;line-height:1.2}
.rb-pal__esc:hover{background:var(--btn);color:var(--ink)}
.rb-pal__list{max-height:min(60vh,460px);overflow:auto;padding:6px 0;overscroll-behavior:contain}
.rb-pal__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 16px 4px}
.rb-pal__item{position:relative;display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;min-width:0}
.rb-pal__item .i{color:var(--muted)}
.rb-pal__item b{font-size:14px;font-weight:650;white-space:nowrap;flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.rb-pal__item span{flex:1;min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-pal__item small{font-family:var(--mono);font-size:10px;color:var(--muted);flex:none}
.rb-pal__item:hover{background:var(--btn)}
.rb-pal__item[aria-selected="true"]{background:var(--accent-wash)}
.rb-pal__item[aria-selected="true"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--accent)}
.rb-pal__item mark{background:none;color:var(--accent)}
.rb-pal__empty{padding:26px 16px;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.7}
.rb-pal__empty b{color:var(--ink);font-weight:650}
.rb-pal__foot{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;padding:8px 16px;border-top:1px solid var(--soft);font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.rb-pal__foot kbd{border:1px solid var(--soft);border-radius:var(--radius);padding:1px 4px 0;margin-right:2px;font:inherit}
.rb-pal__foot .sp{flex:1}
html[data-pal="open"]{overflow:hidden}
/* 모바일 헤더 검색 버튼: 데스크톱에서는 숨김 */
.rb-ib--search{display:none}
@media (max-width:960px){.rb-ib--search{display:inline-grid}.rb-pal__panel{margin-top:12px}}

/* ---------- 쿠키 설정 대화상자 · 첫 방문 배너 · 푸터 버튼 ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rb-ft__ck{font:inherit;color:var(--muted);padding:0;cursor:pointer}
.rb-ft__ck:hover{color:var(--ink)}
.rb-ft__ck small{font-size:10px;color:var(--accent);margin-left:2px}
.rb-ck{position:fixed;inset:0;z-index:45;display:none}
.rb-ck[open]{display:block}
.rb-ck__scrim{position:absolute;inset:0;background:rgba(26,18,8,.42)}
html[data-theme="dark"] .rb-ck__scrim{background:rgba(0,0,0,.55)}
.rb-ck__panel{position:relative;width:min(560px,calc(100% - 24px));margin:min(14vh,120px) auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rb-ck__head{padding:16px 18px 12px;border-bottom:1px solid var(--soft)}
.rb-ck__head b{display:block;font-family:var(--serif);font-size:17px;font-weight:900;letter-spacing:-.02em;margin-bottom:4px}
.rb-ck__head p{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.rb-ck__list{list-style:none;margin:0;padding:4px 18px}
.rb-ck__list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--soft)}
.rb-ck__list li:first-child{border-top:0}
.rb-ck__list b{display:block;font-size:14px;font-weight:750;margin-bottom:2px}
.rb-ck__list span{display:block;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.rb-ck__list em{flex:none;font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);padding:3px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--wash)}
.rb-ck__list .v2-switch{flex:none}
.rb-ck__foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 18px 14px;border-top:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 60%, var(--paper))}
.rb-ck__foot a{font-family:var(--sans);font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.rb-ck__foot .sp{flex:1}
.rb-ckbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:44;display:none;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:720px;margin:0 auto;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.rb-ckbar[open]{display:flex}
.rb-ckbar p{margin:0;flex:1;min-width:220px;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.rb-ckbar p a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.rb-ckbar .acts{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:560px){.rb-ckbar{left:6px;right:6px;bottom:6px}.rb-ck__list li{flex-direction:column;align-items:flex-start;gap:8px}}

/* ---------- 사이드바 오늘 날짜·시간 ---------- */
.rb-sb__today{position:sticky;bottom:42px;z-index:1;margin-top:auto;padding:10px 14px 8px;background:var(--wash);border-top:1px solid var(--soft);display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline}
.rb-sb__today-l{grid-row:1 / 3;align-self:start;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.rb-sb__today-d{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.rb-sb__today-t{display:flex;align-items:baseline;gap:6px}
.rb-sb__today-t b{font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;line-height:1.1}
.rb-sb__today-t small{font-family:var(--mono);font-size:10px;color:var(--muted)}
.rb-nav{flex:0 0 auto}
html[data-sidebar="collapsed"] .rb-sb__today{display:none}

/* ---------- 언어 전환 드롭다운 (시안) ---------- */
.rb-lang__wrap{position:relative}
.rb-lang[aria-expanded="true"]{background:var(--btn)}
.rb-lang__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:280px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:4px 0;overflow:hidden}
.rb-lang__head,.rb-lang__foot{font-family:var(--sans);font-size:10.5px;color:var(--muted);padding:6px 12px}
.rb-lang__head{font-weight:600;letter-spacing:.02em;border-bottom:1px solid var(--soft);margin-bottom:2px}
.rb-lang__foot{border-top:1px solid var(--soft);margin-top:2px}
.rb-lang__menu a{display:flex;align-items:center;gap:8px;padding:7px 12px;color:var(--ink);transition:background var(--ease)}
.rb-lang__menu a:hover,.rb-lang__menu a:focus-visible{background:var(--btn);outline:0}
.rb-lang__menu a b{font-size:13.5px;font-weight:650;white-space:nowrap}
.rb-lang__menu a small{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.rb-lang__menu a .chk{margin-left:auto;font-style:normal;color:var(--accent);font-size:12px}
.rb-lang__menu a .soon{margin-left:auto;font-style:normal;font-family:var(--sans);font-size:10px;color:var(--muted);border:1px solid var(--soft);border-radius:var(--radius);padding:1px 5px;white-space:nowrap}
.rb-lang__menu a.is-current{background:var(--accent-wash)}
.rb-lang__menu a.is-off{color:var(--muted);cursor:default}
.rb-lang__menu a.is-off:hover{background:none}

/* ---------- 공유 팝업 ---------- */
.rb-sharebtn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px 0 7px;border:1px solid var(--soft);border-radius:var(--radius);font-family:var(--mono);font-size:11px;color:var(--muted);transition:background var(--ease),color var(--ease)}
.rb-sharebtn:hover{background:var(--btn);color:var(--ink)}
.rb-sharebtn .i{width:13px;height:13px}
.rb-share{position:fixed;inset:0;z-index:46;display:none}
.rb-share[open]{display:block}
.rb-share__scrim{position:absolute;inset:0;background:rgba(26,18,8,.42)}
html[data-theme="dark"] .rb-share__scrim{background:rgba(0,0,0,.55)}
.rb-share__panel{position:relative;width:min(600px,calc(100% - 24px));margin:min(10vh,90px) auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-height:calc(100dvh - 24px);overflow-y:auto}
.rb-share__head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--soft)}
.rb-share__head b{font-family:var(--serif);font-size:17px;font-weight:900;letter-spacing:-.02em}
.rb-share__head .v2-seg{margin-left:auto}
.rb-share__x{font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--soft);border-radius:var(--radius);padding:3px 6px 1px;line-height:1.2}
.rb-share__x:hover{background:var(--btn);color:var(--ink)}
.rb-share__prev{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;padding:14px 16px;border-bottom:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 60%, var(--paper))}
.rb-share__prev img{width:200px;height:auto;aspect-ratio:1200/630;border:1px solid var(--soft);border-radius:var(--radius);background:#faf6ee;display:block}
.rb-share__meta{min-width:0;display:grid;align-content:center;gap:4px}
.rb-share__meta b{font-size:14px;font-weight:750;line-height:1.4}
.rb-share__meta span{font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.5}
.rb-share__meta code{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-share__copy{display:flex;gap:6px;padding:12px 16px 4px;flex-wrap:wrap}
.rb-share__copy input{flex:1;min-width:200px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:12px;color:var(--ink);outline:0}
.rb-share__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:10px 16px 6px}
.rb-share__t{display:grid;justify-items:center;gap:6px;padding:10px 4px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);transition:background var(--ease),border-color var(--ease)}
.rb-share__t:hover{background:var(--btn);border-color:var(--line)}
.rb-share__t i{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--wash);font-family:var(--serif);font-style:normal;font-weight:900;font-size:15px;color:var(--ink)}
.rb-share__t span{font-family:var(--sans);font-size:11px;color:var(--muted);white-space:nowrap}
.rb-share__foot{padding:6px 16px 14px;min-height:34px}
@media (max-width:560px){.rb-share__prev{grid-template-columns:minmax(0,1fr)}.rb-share__prev img{width:100%}.rb-share__grid{grid-template-columns:repeat(4,minmax(0,1fr))}.rb-share__head .v2-seg{margin-left:0;width:100%;order:3}.rb-share__head{flex-wrap:wrap}}